包含設計模式的React方法是什么？

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

通過組件傳遞組件沒有什么錯，除了組件應該以非常規的格式格式化以便於閱讀，而且通過prop傳遞的組件也通過這種方式進行了更深的縮進：

<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設計組件的主要模式有兩種：

1. 有些組件不提前知道他們的孩子。 這對於側欄或對話框之類的代表通用“框”的組件尤為常見

例：

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>
  );
}

2. 有時您可能需要在組件中存在多個“漏洞”。 在這種情況下，您可能會提出自己的約定而不是使用子項

例：

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