react.js防止写入属性

Question

假设我有一个使用此渲染方法的react.js组件（使用jsx）：

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

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

如果something为假，则反应将其呈现为<a href>Click</a>，但我宁愿将其呈现为<a>Click</a>。

我怎样才能做到这一点？

Answer 1

您可以通过以下代码实现这一点，基本上添加＆＃34; href＆＃34;到网址。

render: function() {
  return (
    <a {this.state.something?"href="+this.props.url:null}>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

如果支持，您可以在此处使用对象传播！

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