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

我想知道是否有比使用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 />
      );
    }
  }
});

var parent=React.createClass({
道具类型：{
可编辑：React.PropTypes.bool.isRequired，
editableOpts:React.PropTypes.shape（{…}）
},
render:function（）{
如果（此.props.可编辑）{
返回(
);
}否则{
//在这种情况下，子级将使用其自己的getDefaultProps（）中的editableOpts
返回(
);
}
}
});

有没有一种方法可以不用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} 
      />
    );
  }
});

var parent=React.createClass({
道具类型：{
可编辑：React.PropTypes.bool.isRequired，
editableOpts:React.PropTypes.shape（{…}）
},
render:function（）{
返回(
);
}
});

---

总结：我试图找到一种方法来定义

Child

的道具，但是传递一个值（或者做其他事情），这样

Child

仍然会从

Child

自己的

getDefaultProps（）

中提取道具的值。你的想法很接近。事实证明，为道具传递

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

var parent=React.createClass({
道具类型：{
可编辑：React.PropTypes.bool.isRequired，
editableOpts:React.PropTypes.shape（{…}）
},
render:function（）{
返回；
}
});

定义

道具

变量：

let props = {};
if (this.props.editable){
  props.editable = this.props.editable;
}

然后在JSX中使用它：

<Child {...props} />

以下是代码中的解决方案：

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    let props = {};
    if (this.props.editable){
      props.editable = this.props.editable;
    }
    return (
      <Child {...props} />
    );
  }
});

var parent=React.createClass({
道具类型：{
可编辑：React.PropTypes.bool.isRequired，
editableOpts:React.PropTypes.shape（{…}）
},
render:function（）{
设props={}；
如果（此.props.可编辑）{
props.editable=this.props.editable；
}
返回(
);
}
});

---

Source，React文档：

将排列运算符添加到

this.props.editable

：

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

---

应该可以工作。

实际上，如果你的道具是布尔型的，则不需要实现条件，但如果你想通过内联条件添加道具，你应该像下面这样写：

const { editable, editableOpts } = this.props;
return (
  <Child {...(editable && { editable: editableOpts } )} />
);

const{editable，editableOpts}=this.props；
返回(
);

希望你不会感到困惑。

{…

意味着它是一个类似于传递现有道具的扩展运算符：

{…道具}

，

可编辑&

意味着如果

可编辑

为

真

则

{editableOpts}

对象将生成，并且使用

{…

我们将生成一个类似它的新对象：

{…{editableOpts}

表示

可编辑={editableOpts}

但如果

this.porps.editable

为真。

var parent=React.createClass({
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})} 
      />
    );
  }
});

道具类型：{
可编辑：React.PropTypes.bool.isRequired，
editableOpts:React.PropTypes.shape（{…}）
},
render:function（）{
返回(
);
}
});

---

如果道具已定义，则传递道具。否则，道具不传递。在另一个答案中，道具仍传递，但值为

未定义

，这仍然意味着道具正在传递。

您也可以尝试这种简捷的方法

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

---

嘿，我可能会迟到，但我想分享一个小提示。 如果您在这里是因为希望动态传递道具。那么您可以使用*sign将所有内容作为别名导入，也就是说，在这种情况下，作为grs，导入将在一个对象中，然后您可以使用该对象动态传递道具。 希望这能对你们中的一些人有所帮助

从“./组件/主题”导入*作为grs；
从“React”导入React；
const GridInput=（{sp，…props}）=>{
返回(
);
};
导出默认GridInput；

你能把

孩子的代码也包括进去吗？还有，你是不是想说
而不是
？@JimSkerritt我没有混淆道具，尽管我知道它看起来是这样的。我正在试着使用，这就是他们使用的格式。我不确定
孩子的
代码实际上对我的要求很重要，这就是w为什么我没有包括它。我真的只是在寻找一种方法，可以选择将道具传递或不传递给
Child
，而不需要在
Parent
中的if语句中包含大量类似的代码。明白了，只需检查：）我会给你一个简短的答案哦，太棒了！你在文档中找到了吗？我是在快速搜索过程中查找但找不到任何东西
null
没有像
未定义的
那样的强大功能。顺便说一句，这是一个有用的技巧！希望有关于如何有效使用条件渲染技术的好资源在
false
情况下，它对我来说没有我想要的效果-我仍然得到一个键值对：
property
：
null
。用一个JSX元素还是可以做到的吗？我知道这个答案已经很老了，所以我不知道在这段时间里事情是否发生了变化，但是对于2021年遇到这个答案的人来说：将
未定义的
作为道具传递与根本不设置道具是两码事组件，检查
对象。键（道具）
将显示已设置的属性-甚至是
未定义的值
。这对某些组件很重要，这些组件作为道具设置的受控组件和非受控组件。这是否会产生与可编辑组件相同的结果={this.props.editable？this.props.editableOpts:undefined}或者有区别吗？@garyee:区别在于一些组件可能会错误地将
undefined
视为覆盖（例如
null
，它始终是一个覆盖），因此保持默认v