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

发布时间：2020-12-15 20:19:05 所属栏目：百科来源：网络整理

导读：在React中实现类似AngularJS的属性指令的最佳方法是什么？我已经使用React超过6个月了. 据我所知,AngularJS在DOM上工作,React在Virtual DOM上工作,但是我想在React中实现类似于ng-if的东西,而不是在任何地方编写三元运算符.我知道我可以编写一个包装元素组

在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的做法,但它确实使事情变得更加容易.有什么建议？

解决方法

而不是尝试使组件执行此操作,在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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!