Question

是ReactJS的新手。我想在render函数中使用IF块。在搜索这个时，我得到的结果如“你应该使用三元运算符而不是IF语句”。但如果我想使用类似的东西，

$.each(array, function(i, x) {
  var flag = 0
  if({x.a1} || !{x.a2}) {
    flag = 1;
    <p>true flag enabled</p>
  }
  <p>...</p>
 });

如何将此语句转换为JSX语法或如何在React render fucntion中使用它。

提前致谢。

Answer 1

此链接可以帮助您 https://facebook.github.io/react/tips/if-else-in-JSX.html

但我会使用这样的东西，因为它更容易阅读（恕我直言）。注意，你的数组是一个prop - 传递给组件（或者可能是一个状态）。我使用lodash进行映射等，因此它在整个地方非常有用（https://lodash.com/）

_renderElements: function(){

return _.map(this.props.array, function(el){
var flag = 0;

 return el.a1 || el.a2 ? <p>{'true  1 enabled'}</p> : <p>...</p>;


})

},
render: function () {
  return (
    {this._renderElements()}
    } 
  );
}

希望有所帮助。

Answer 2

您希望渲染功能看起来像这样：

render: function () {
  return (
    {
      array.map(function (el, i) {
        var flag = 0;

        if (el.a1 || el.a2) {
          flag = 1;
          return <p>true flag enabled</p>;
        } else {
          return <p>...</p>;
        }
      }
    } 
  );
}

React允许您返回一个React元素数组，因此您可以映射数组并为数组的每个元素返回一个JSX元素。

Answer 3

我这有两种方式之一，主要取决于if语句的大小。

一个场景，我不知道我是否要渲染元素：

Component = React.createClass({
    render() {
        var elem;
        if (something) {
            elem = (<SomeOtherComponent />);
        }
        return (
            <div>{elem}</div>
        );
    }
});

这基本上是一种显示元素/组件的方法。如果我要映射某些东西，我会使用一个单独的方法并调用它：

Component = React.createClass({
    mapIt() {
        return this.props.items.map(item => {
            ... do your stuff ...
            return (
                <SomeOtherComponent prop1={item.value} ... />
            );
        });
    },

    render() {
        return (
            {this.mapIt()}
        );
    }
});

这对我来说是一种很好的清洁处理方式。

IF块里面的渲染函数ReactJS

3 个答案: