React 设计模式~布局组件~

百变鹏仔 3天前 #JavaScript

文章标签组件

这种模式经常用于由侧边栏、主栏等组成的常见布局。

・app.js

import { splitscreen } from "./components/split-screen";const leftside = ({ title }) =&gt; {  return <h2 style="{{" backgroundcolor:>{title}</h2>;};const rightside = ({ title }) =&gt; {  return <h2 style="{{" backgroundcolor:>{title}</h2>;};function app() {  return (    <splitscreen leftwidth="{1}" rightwidth="{3}"><leftside title='{"left"}'></leftside><rightside title='{"right"}'></rightside></splitscreen>  );}export default app;

・该组件将 splitscreen 组件中的 leftside 和 rightside 组件作为子组件包装。

・我将标题道具传递给 leftside 和 rightside 组件。

·我将 leftwidth 和 rightwidth 属性传递给 splitscreen 组件，以便我可以更改每个组件的宽度。

・split-screen.js

import React from "react";import { styled } from "styled-components";const Container = styled.div`  display: flex;`;const Panel = styled.div`  flex: ${(p) =&gt; p.flex};`;export const SplitScreen = ({ children, leftWidth = 1, rightWidth = 1 }) =&gt; {  const [left, right] = children;  return (    <container><panel flex="{leftWidth}">{left}</panel><panel flex="{rightWidth}">{right}</panel></container>  );};

・该组件由左组件和右组件组成，它们作为子组件接收。

・我可以将接收 props 的每个组件的宽度更改为 leftwidth 和 rightwidth。

文章推荐

React 设计模式~布局组件~

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？