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

Question

我试图找出适当的"反应"方式来传递一个可选的道具,它是一个容器组件的元素,其处理方式与该组件的子元素不同.

举一个简单的例子,我有一个Panel组件,它渲染它的子组件,它还有一个可选的"title"prop(为了这个例子,它是一个元素而不是一个字符串),它被特别渲染(放入一个特殊的地方,在保持抽象的同时具有特殊的行为.

一种选择是将一个组件从子项中拉出并进行特殊渲染:

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

但让孩子们像这样分开处理并分开处理似乎很奇怪.

这通常是如何处理的,我甚至正在以正确的方式思考这个问题

Answer 1

你不需要做任何特别的事情.只需将标题组件作为道具传递,然后{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}/>;
  }
}

如果不传递任何值的title道具(或者如果该值false,null或undefined),那么什么都不会在那里渲染.

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

Answer 2

你可以做这样的事情

render(){
    <div>
        {this.props.title ? this.props.title : null}
        {this.props.children}
    </div>
}

基本上，如果您将 title 元素作为 prop 传递，然后将其创建为元素并渲染它。否则只需输入 null...

要创建它，你会做这样的事情。

<Panel title={<Title>Something Here</Title>}
    <div> something here</div>
</Panel>

这通常是 React 处理可选子组件的方式