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

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

本文关键字：组件 元素 reactjs      更新时间：2023-09-26

我正试图找出一种正确的"react"方式，将一个可选的道具（Element）传递给一个容器组件，该组件的处理方式与该组件的子组件不同。

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

一种选择是有一个从子级中提取并专门渲染的组件：

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

但是，像那样把孩子们拉出来单独处理似乎更好些。

这通常是如何在react中处理的，我是否以正确的方式思考

您不需要做任何特别的事情。只需将标题组件作为道具传递，然后在任何需要渲染的地方使用{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中相当常见的模式。

您可以执行类似的操作

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

基本上，如果你把一个title元素作为道具传递，然后把它创建为一个元素并渲染它。。。

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

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

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

当您需要来自可选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>
)}

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

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

class NewComponent extends React.Component {
    ...
    componentDidMount() {
        this.props.functionThatDoesSomething()
    }
}
NewComponent.defaultProps = {
    functionThatDoesSomething: () => {}
}

这样，父组件可以选择是否传递函数道具，并且您的应用程序不会因错误而崩溃

this.props.functionThatDoesSomething不是函数.

相关文章：