reactjs - React 组件中的条件属性？

Question

我是 react 新手，我刚刚写了一些丑陋的代码。有人可以告诉我更好的方法吗？这是伪代码:

let btn;

if(this.props.href && !this.props.onClick && !this.props.dataMsg etc...)
btn = <a href={this.props.href}>{this.props.text}</a>;


else if(!this.props.href && this.props.onClick && !this.props.dataMsg etc...)
btn = <a onClick={this.props.onClick}>{this.props.text}</a>;

etc...

else if(this.props.href && this.props.onClick && !this.props.dataMsg etc...)
btn = <a href={this.props.href} onClick={this.props.onClick}>{this.props.text}</a>;

else if(!this.props.href && this.props.onClick && this.props.dataMsg etc...)
btn = <a onClick={this.props.onClick} data-msg={this.props.dataMsg}>{this.props.text}</a>;

etc...

也就是说，我要设置<a>的属性仅当 react 组件收到其 Prop 时才使用该元素。然而，并非 React 组件的所有 props 都是属性，其中一些可能是 this.props.text属于innerHTML。

必须有一种不太冗长的方式来写我想要的内容吗？

Answer 1

React will ignore all the attribute which has undefined as its value.

因此，您不需要使用 if 条件。相反，您可以检查 value 属性，如果未获取该值，则返回 undefined。

例如:

您可以编写如下代码，

<a
  href={this.props.href} //returns undefined if href not present in props
  onClick={this.props.onClick && this.props.onClick} //set callback if it is present in the props
  data-msg={this.props.dataMsg} //returns undefined if href not present in props
>
 {this.props.text}
</a>;

向任何属性返回 undefined 会使 React 忽略这些属性。

希望对您有帮助!