reactjs - 在 react 中使用传递组件作为 Prop 是一个好习惯还是我们应该将内容作为 Prop 传递？

Question

此代码说明我们可以将组件和内容作为 props 传递，但任何人都可以解释哪些是编码的好习惯。将组件或内容作为 Prop 传递哪个更好？

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


**OR**

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

Answer 1

当您创建容器时，第一种方法很好——您将要用于许多不同设备的组件。接下来，您可以轻松自定义它，以 left 和 right 参数的形式提供任何您想要的参数。

当您决定您的组件应该包含 Contacts 和 Chat 子组件时，第二个很有用，当它们是它的固有部分时 - 那么您确定它们会赢'被改变。

但如果您不确定，我建议采用第二种方法 - 这样您就可以避免潜在的问题，并且可以轻松地在代码中看到渲染了哪些组件，从而加速开发。