If statement 渲染函数中的IF块

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

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

$。每个（数组、函数（i、x）{
var标志=0
if（{x.a1}| |！{x.a2}）{
flag=1；
启用真标志

}

});

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

---

提前感谢。

您想让渲染功能看起来像这样：

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>;
        }
      }
    } 
  );
}

render:function（）{
返回(
{
array.map（函数（el，i）{
var标志=0；
如果（标高a1 | |标高a2）{
flag=1；
返回真标志已启用
；
}否则{
返回…
；
}
}
} 
);
}

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

此链接将帮助您

但是我会使用类似的东西，因为它更容易阅读（IMHO）。注意，数组是传递到组件中的一个道具（或者可以是一个状态）。我会使用lodash进行映射等，因为它非常有用（）

\u渲染：函数（）{
返回映射（this.props.array，函数（el）{
var标志=0；
返回el.a1 | | el.a2？{'true 1 enabled'}
：…
；
})
},
渲染：函数（）{
返回(
{this.\u renderRelations（）}
} 
);
}

---

希望这会有所帮助。

我用两种方法之一来实现这一点，主要取决于if语句的大小

有一种情况，我不知道是否要渲染元素：

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

Component=React.createClass({
render（）{
var-elem；
如果（某物）{
元素=（）；
}
返回(
{elem}
);
}
});

这基本上是一种显示元素/组件或不显示元素/组件的方法。如果要映射某个对象，我将使用单独的方法并调用它：

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

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

Component=React.createClass({
mapIt（）{
返回此.props.items.map（item=>{
…做你的事。。。
返回(
);
});
},
render（）{
返回(
{this.mapIt（）}
);
}
});

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

问题是，如果我在jsx中使用“if”，巴贝尔会抛出错误“意外标记”，三元运算符工作正常，就像@Davet一样。但我只想使用简单的“if”块，而不是if..else。

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

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