React中与AngularJS属性指令相对应的是什么？

Question

如何在React中实现类似AngularJS属性指令的最佳方法？

我已经使用React超过6个月了。

我知道，AngularJS是基于DOM工作的，而React是基于虚拟DOM工作的，但是假设我想在React中实现像ng-if那样的东西，而不是在每个地方编写三元运算符。我知道我可以编写一个包装器元素组件，比如

<ShowIf condition={this.state.something}>
    <div>
        Some text
    </div>
</ShowIf>

但是我想要的是这样的东西。

<div doThisIf={this.state.something}>
    Some text
</div>

我发现Wix.com的React模板，但它是一个转译器。我正在寻找一种通用解决方案。

这可能违反了React的惯例，但它确实使事情变得更加容易。有什么建议吗？

- Sanket Sahu

---

由于<div>不是React组件，您将无法直接添加属性。为什么<ShowIf>不令人满意？第二种方法似乎并没有带来太多好处。 - Dana Woodman

<div>是一个React组件，对应于React.DOM.div。 <ShowIf>不是很令人满意，因为如果我想在<div>上添加一个新的事件，比如onHover，它需要两个函数，就像onClick一样，我不能像onClick那样直接添加，我需要编写一个包装组件onHover，但把它作为<div>的属性更加合理。 - Sanket Sahu

我已发布了一个回答，解决了这个问题，这是我自己解决的方式（似乎在React社区中很常见）。 - Dana Woodman

Answer 1

不要试图制作组件来完成这个任务，而是在你的render方法的return语句之前添加一个条件，像这样：

React.createClass({

  //... some other stuff

  render: function () {
    var something;
    if (this.state.something) {
      something = (
        <span onClick={this.handleClick}>
          Some React stuff here...
        </span>
      );
    }

    return (
      <div>
        <h1>Something</h1>
        <p>Any other stuff here...</p>
        {/* This only shows up if `this.state.something` is true: */}
        {something}
      </div>
    )
  }
});

如果一个变量返回null/undefined，它将不会被渲染，也不会为其创建任何HTML。

- Dana Woodman