React.js：仅在条件为真时设置 Prop

Question

我对 react.js 很陌生，并且在将道具传递给孩子们时遇到了一些麻烦。我想做这样的事情：

render: function(){
   var idProp = this.props.id ? 'id={this.props.id}' : null;
   return (
     <div {idProp} />
   );
}

因此，只有在条件为真时才应传递道具 ID。但是上面的代码不起作用。这可能吗？我究竟做错了什么？谢谢！

Answer 1

var idProp = this.props.id ? 'id={this.props.id}' : null;您的代码中应该以 javascript 方式编写。此外，您还必须将“id=”移至 JSX 语法。

render: function(){
   var idProp = this.props.id ? this.props.id : null;
   return (
     <div id={idProp} />
   );
}

JSX编译器首先将代码转换为纯js。为了创建 dom 元素，它使用该React.createElement(...)函数。为了识别函数的参数，JSX 编译器需要元素的属性名称是静态的。上述代码转换后的 javascript 将是..

render: function(){
   var idProp = this.props.id ? this.props.id : null;
   return (
     React.createElement("div", {id: idProp})
   );
}

Answer 2

如果您可以使用扩展运算符，您可以巧妙地做到这一点。

render: function() {
    var optionalProps = {};
    if (something) optionalProps.id = id;
    return (<div {...optionalProps} />);
}