javascript - React.js:仅在条件为真时设置属性

我对react.js很陌生，在将 Prop 传递给 child 方面有些麻烦。
我想做这样的事情:

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

因此，仅当条件为true时才应传递prop id。
但是上面的代码不起作用。
这可能吗？我究竟做错了什么？
谢谢!

最佳答案

您代码中的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})
   );
}

关于javascript - React.js:仅在条件为真时设置属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26951617/