IT技术 - React.js：仅在条件为真时设置 Prop - 吾爱随笔录

IT技术 javascript reactjs

2022-07-28 00:54:13

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

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

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

3个回答

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

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

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

使用这种方法，您不必声明一个空对象，可以在组件 JSX 标记内内联验证。

<Component  {...(id && {id})} />

其它你可能感兴趣的问题