如何在reactjs中将可选元素作为 prop 传递给组件

我试图找出正确的“反应”方式来传递一个可选的 prop，该 prop 是一个容器组件的 Element，该组件的处理方式与该组件的子组件不同。

举一个简单的例子，我有一个面板组件，它渲染它的子组件，它还有一个可选的“title”道具（为了示例，它是一个元素而不是字符串），它被专门渲染（放入一个特殊的点，在保持抽象的同时具有特殊的行为。

一种选择是从子组件中取出一个组件并专门渲染：

<Panel>
   <Title> some stuff</Title>
   <div> some other stuff</div>
</Panel>

但像这样把孩子们拉出来单独处理似乎很奇怪。

这通常是如何在反应中处理的，我是否以正确的方式思考这个问题

你不需要做任何特别的事情。只需将 title 组件作为 prop 传递，然后使用{this.props.title}无论您希望它呈现在哪里：

class Panel extends React.Component {
  render() {
    return <div>
      {this.props.title}
      <div>Some other stuff...</div>
    </div>;
  }
}

class App extends React.Component {
  render() {
    var title = <Title>My Title</Title>;
    return <Panel title={title}/>;
  }
}

如果您没有传递任何值titleprop（或者如果该值为false, null, or undefined）那么那里将不会呈现任何内容。

这是 React 中相当常见的模式。