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

Question

我正在尝试找出正确的 "react" 方法来将作为元素的可选道具传递给容器组件，其处理方式与该组件的 children 不同。

举个简单的例子，我有一个 Panel 组件，它呈现它的 children，它还有一个可选的 "title" 属性（这是一个元素而不是字符串，为了示例）被特别渲染（放在一个特殊的位置，在保持抽象的同时具有特殊的行为。

一个选择是从 children 中拉出一个组件并专门渲染：

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

但是把 children 拉出来单独处理似乎很奇怪。

这在 React 中通常是如何处理的，我什至认为这是正确的方式

Answer 1

你可以这样做

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

基本上，如果您将标题元素作为道具传递，然后将其创建为元素并进行渲染。否则就输入空...

要创建它，您需要这样做。

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

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

Answer 2

您不需要做任何特别的事情。只需将 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}/>;
  }
}

如果您不为 title 属性传递任何值（或者如果值为 false、null 或 undefined），那么什么都不会呈现在那里。

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

Answer 3

当您需要来自可选 prop 的属性时，您必须先检查 prop 是否已交付。否则，您将得到：

TypeError: Cannot read property 'yourPropProperty' of undefined

在条件渲染上下文中（取决于我的可选 this.props.ignore 数组），此不会工作：

{!this.props.ignore.includes('div')) && (
   <div>
      Hey
   </div>
)}

相反，您应该这样做：

{(!this.props.ignore || !this.props.ignore.includes('div'))) && (
   <div>
      Hey
   </div>
)}

Answer 4

您可以做的一件事是为您的组件设置默认道具（通常初始化为无操作）。

例如，如果你想要一个可选的功能道具：

class NewComponent extends React.Component {
    ...
    componentDidMount() {
        this.props.functionThatDoesSomething()
    }
}

NewComponent.defaultProps = {
    functionThatDoesSomething: () => {}
}

这样，父组件可以选择是否传递 function 属性，您的应用不会因错误而崩溃

this.props.functionThatDoesSomething is not a function .

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

How to pass optional elements to a component as a prop in reactjs

javascript

components

reactjs