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

小能豆

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

javascript

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

例如，现在我有：

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

总结一下：我正在尝试找到一种方法来定义一个道具Child，但传递一个值（或做其他事情），以便仍然从其自身Child中提取该道具的值。Child``getDefaultProps()

阅读 33

2024-06-10

共1个答案

小能豆

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

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

2024-06-10