Question

此代码解释说我们可以将组件和内容作为道具传递，但任何人都可以解释哪种代码是良好的做法。哪个更好，将组件或内容作为道具传递？

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子组件时，第二个组件非常有用，当它们是子组件的固有组件时 - 那么您确定它们不会被更改。< / p>

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

将pass组件用作反应中的道具或者我们应该将内容作为道具传递是一种好习惯吗？

1 个答案: