react.js阻止写入属性

Question

假设我有一个react.js组件，该组件具有以下渲染方法（使用jsx）：

render: function() {
  return (
    <a href={this.state.something?this.props.url:null}>Click</a>
  );
}

不管这个组件是无用的，我的问题是：

在something为false的情况下，react将其渲染为<a href>Click</a>，但我宁愿将其渲染成<a>Click</a>。

我怎样才能做到这一点？

Answer 1

如果支持，可以在此处使用对象扩散！

var props = {href:this.props.url};
if(!this.state.something){
    props = {}
}
return <a {...props}>Click</a>

Answer 2

如果你只是想确保href不会出现，那么你可以这样做，也可以避免三元运算符中的文本，以获得更干净的外观

render = function() {
  props = this.state.something? {href: this.props.url} : {};
  el = react.createElement('a', props, 'Click');
  return el;
}

Answer 3

您可以通过以下代码实现这一点，基本上是在url中添加"href"。

render: function() {
  return (
    <a {this.state.something?"href="+this.props.url:null}>Click</a>
  );
}