Javascript 如何在reactjs中将可选元素作为道具传递给组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33640327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass optional elements to a component as a prop in reactjs
提问by Zak Kus
I am trying to figure out the proper "react" way to pass in an optional prop that is an Element to a container component, that is handled differently from the children of that component.
我试图找出正确的“反应”方式，将作为 Element 的可选 prop 传递给容器组件，该组件的处理方式与该组件的子组件不同。
For a simple example, I have a Panel component, which renders its children, that also has an optional "title" prop (which is an element rather than a string, for the sake of the example) that gets specially rendered (put in a special spot, with special behaviors in while maintaining the abstraction.
举个简单的例子，我有一个 Panel 组件，它渲染它的子组件，它还有一个可选的“title”道具（对于这个例子，它是一个元素而不是一个字符串），它被特别渲染（放在一个特殊的地方，在保持抽象的同时具有特殊的行为。
One option is to have a component which is pulled out of the children and rendered specially:
一种选择是拥有一个从子项中拉出并专门呈现的组件：
<Panel>
<Title> some stuff</Title>
<div> some other stuff</div>
</Panel>
But it seems wierd to have the children pulled out and handled separately like that.
但让孩子们像那样分开处理似乎很奇怪。
How is this normally handled in react, and am I even thinking about this the right way
这通常如何在反应中处理，我什至以正确的方式思考这个问题
回答by Jordan Running
You don't need to do anything special. Just pass the title component as a prop, and then use {this.props.title}wherever you want it to be rendered:
你不需要做任何特别的事情。只需将标题组件作为道具传递，然后{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}/>;
}
}
If you don't pass any value for the titleprop (or if the value is false, null, or undefined) then nothing will be rendered there.
如果您没有为titleprop传递任何值（或者如果值为false、null、 或undefined），则不会在那里呈现任何内容。
This is a fairly common pattern in React.
这是 React 中相当常见的模式。
回答by John Ruddell
you can do something like this
你可以做这样的事情
render(){
<div>
{this.props.title ? this.props.title : null}
{this.props.children}
</div>
}
basically if you pass a title element as a prop then create it as an element and render it. else just put in null...
基本上，如果您将标题元素作为道具传递，然后将其创建为元素并呈现它。否则只需放入空...
to create it you would do something like this.
创建它你会做这样的事情。
<Panel title={<Title>Something Here</Title>}
<div> something here</div>
</Panel>
This is generally how react should handle optional child components
这通常是 react 处理可选子组件的方式
回答by Franco Méndez
When you need an attribute from your optional prop, you will have to check firstif the propwas delivered. Otherwise, you will get a:
当您需要来自 optional 的属性时prop，您必须首先检查该属性是否prop已交付。否则，您将获得：
TypeError: Cannot read property 'yourPropProperty' of undefined
In conditional rendering context (depending on my optional this.props.ignorearray), this won'twork:
在有条件的渲染上下文（根据我的可选的this.props.ignore阵列），这将无法正常工作：
{!this.props.ignore.includes('div')) && (
<div>
Hey
</div>
)}
Instead, you should do:
相反，你应该这样做：
{(!this.props.ignore || !this.props.ignore.includes('div'))) && (
<div>
Hey
</div>
)}
回答by Taiwosam
One thing you can do is have default props (usually initialised to a no-op) for your component.
您可以做的一件事是为您的组件设置默认道具（通常初始化为无操作）。
For example, if you want to have an optional function prop:
例如，如果你想要一个可选的函数 prop：
class NewComponent extends React.Component {
...
componentDidMount() {
this.props.functionThatDoesSomething()
}
}
NewComponent.defaultProps = {
functionThatDoesSomething: () => {}
}
This way, parent components can choose to pass the function prop or not and your app won't crash due to the error
这样，父组件可以选择是否传递函数 prop 并且您的应用程序不会因错误而崩溃
this.props.functionThatDoesSomething is not a function .
this.props.functionThatDoesSomething 不是函数。
