当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - React: inline conditionally pass prop to component

问题描述:

I would like to know if there is a better way to conditionally pass a prop than using an if-statement.

For example, right now I have:

var parent = React.createClass({

propTypes: {

editable: React.PropTypes.bool.isRequired,

editableOpts: React.PropTypes.shape({...})

},

render: function() {

if(this.props.editable) {

return (

<Child editable={this.props.editableOpts} />

);

} else {

// In this case, Child will use the editableOpts from its own getDefaultProps()

return (

<Child />

);

}

}

});

Is there a way to write this without the if-statement? I am was thinking something along the lines of a type of inline-if-statement in the JSX:

var parent = React.createClass({

propTypes: {

editable: React.PropTypes.bool.isRequired,

editableOpts: React.PropTypes.shape({...})

},

render: function() {

return (

<Child

{this.props.editable ? editable={this.props.editableOpts} : null}

/>

);

}

});

To wrap-up: I'm trying to find a way to define a prop for Child, but pass a value (or do something else) such that Child still pulls that prop's value from Child's own getDefaultProps().

网友答案:

You were close with your idea. It turns out that passing undefined for a prop is the same as not including it at all, which will still trigger the default prop value. So you could do something like this:

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return <Child 
      editable={this.props.editable ?
                  this.props.editableOpts : 
                  undefined}
    />;
  }
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: