Question

在React中实现类似AngularJS的属性指令的最佳方法是什么？

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

据我所知，AngularJS适用于DOM而React适用于Virtual 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 templates，但这是一个转发器。我正在寻找通用的解决方案。

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

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。

在React中反对AngularJS属性指令的一部分

1 个答案: