Question

我想尽可能地封装。假设我们正在使用具有模式的CSS框架，并且希望对其进行组件化。这将使我们能够集中所有代码实例，因此，如果要更改模式，则只需在此组件中进行更改。

<Modal
    header={
        "Title"
    }
    body={
        <div>hello</div>
    }
    footer={
        <button>Push me</button>
    }
    />

Behind the scenes, it looks something like this:

const Modal = () => {
    return <div className="modal">
        <div className="modal-head">
            {this.props.head}
        </div>
        <div className="modal-body">
            {this.props.body}
        </div>
        <div className="modal-footer">
            {this.props.footer}
        </div>
    </div>
}

我没有特别发现这种设计模式有什么问题，我认为它完全可以实现我想要的。但是，我怀疑可能会有更“正确”的方式。

Answer 1

通过props传递组件没有什么错，除了应该以非常规的格式格式化组件以便于阅读，而且通过props传递的组件也以这种方式进行了更深的缩进：

<Modal
    header={
        "Title"
    }

一种常见的方法是只为每个部分提供演示组件：

const ModalHeader = props => <div className="modal-headerbody">{props.children}</div>;

父级组件可以根据需要对子级进行严格限制：

class Modal extends Component {
  static Header = ModalHeader;

  render() {
    return (
      <div className="modal">
        {this.props.children.find(({ type }) => type === ModalHeader)}
        ...
      </div>
    );
  }
}

还可以将子组件作为静态属性托管：

<Modal>
  <Modal.Header>...</Modal.Header>
</Modal>

Answer 2

有两种主要模式用于基于React Composition Model设计组件：

某些组件不提前知道自己的孩子。对于表示通用“框”的侧边栏或对话框之类的组件来说，这尤其常见

示例：

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
     {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

有时您可能在组件中需要多个“孔”。在这样的情况下，您可能会想出自己的约定而不是使用孩子

示例：

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

第二种模式正是您在问题中所写的。

以您的示例为例，最好使用第一个设计模式

引用：https://reactjs.org/docs/composition-vs-inheritance.html

包含设计模式的React方法是什么？

2 个答案: