渲染函数 ReactJS 中的 IF 块

Question

我是 ReactJS 的新手。我想在渲染函数中使用一个 IF 块。在搜索这个时，我得到了 "You should use ternary operator instead of IF statement" 这样的结果。但是如果我想使用类似的东西，

$.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功能中使用它。

提前致谢。

Answer 1

你想让你的渲染函数看起来像这样：

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 允许您 return 一个 React 元素数组，因此您可以映射您的数组并 return 为数组的每个元素映射一个 JSX 元素。

Answer 2

这篇link会对你有所帮助 https://facebook.github.io/react/tips/if-else-in-JSX.html

但我会使用这样的东西，因为它更容易阅读（恕我直言）。请注意，您的数组是一个道具 - 传递到组件（或者可能是一个状态）。我会使用 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 3

我使用两种方法之一来执行此操作，主要取决于 if 语句的大小。

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

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

这基本上是一种显示或不显示 element/component 的方法。如果我要映射某些东西，我会使用单独的方法并调用它：

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

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

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

渲染函数 ReactJS 中的 IF 块

IF block inside render function ReactJS

if-statement

reactjs

react-jsx