React：内联有条件地将 prop 传递给组件

javascript reactjs inline

2022-08-30 04:21:59

我想知道是否有比使用if语句更好的有条件传递道具的方法。

例如，现在我有：

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 />
      );
    }
  }
});

有没有办法在没有if语句的情况下编写它？我正在沿着JSX中的一种内联if语句进行思考：

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} 
      />
    );
  }
});

总结一下：我试图找到一种方法来定义一个 prop，但传递一个值（或做其他事情），这样仍然从自己的中拉取该 prop 的值。ChildChildChildgetDefaultProps()

答案 1

你和你的想法很接近。事实证明，传递 prop 与根本不包含它相同，这仍然会触发默认 prop 值。所以你可以做这样的事情：undefined

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}
    />;
  }
});

答案 2

将点差运算符添加到：this.props.editable

<Child {...(this.props.editable ? {editable: this.props.editableOpts} : {})} >

应该工作。