Javascript React.js：仅当条件为真时设置道具

我是react.js的新手，在给孩子们传递道具时遇到了一些麻烦。 我想这样做：

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

render:function（）{
var idProp=this.props.id？'id={this.props.id}）：null；
返回(
);
}

因此，仅当条件为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} />
   );
}

如果可以使用，您可以使用spread操作符巧妙地执行此操作

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

render:function（）{
var optionalProps={}；
如果（某物）optionalProps.id=id；
返回（）；
}
您在这里真正想要实现什么？将空道具传递给您的孩子没有害处。
render: function() {
    var optionalProps = {};
    if (something) optionalProps.id = id;
    return (<div {...optionalProps} />);
}