Question

我使用React 16.0。

我想要有条件地返回一个元素，如下所示。

import React from 'react';

export default class App extends React.PureComponent {
    render () {
        return [
            <div className="a"></div>,
            {condition ? <div className="b"></div> : null},
            {condition ? <div className="c"></div> : null}
        ];
    }
}

有没有办法在return语句之外没有任何额外的方法或条件语句？

谢谢你的阅读。

Answer 1

你在数组中，而不是JSX。没有必要使用花括号，只需执行三元操作，然后在其后面加一个逗号。

return [
    <div className="a"></div>,
    condition ? <div className="b"></div> : null,
    condition ? <div className="c"></div> : null
];

请记住，如果条件为false，这将创建索引，其值为数组中的值。

Answer 2

您不需要将您的条件包裹在{}内，否则会使其成为数组中的对象。您还需要为数组中的每个项指定唯一键。

const condition = true;
export default class App extends React.PureComponent {
  render() {
    return [
      <div key="a" className="a">a</div>,
      condition?<div key="b" className="b">b</div> : null,
      condition?<div key="c" className="c">c</div> : null
    ];
  }
}
render(<App />, document.getElementById('root'));

<强> CodeSandbox

Answer 3

您可以简单地将其作为

export default class App extends React.PureComponent {
    render () {
        var b = condition ? <div className="b"></div> : null;
        var c = condition ? <div className="c"></div> : null;
        return [<div className="a"></div>,b,c];
    }
}

Answer 4

看起来你基本上拥有它！

import React from 'react';

export default class App extends React.PureComponent {
    render () {
        return (
            <div>
            <div className="a"></div>
            {condition ? <div className="b"></div> : undefined}
            {condition ? <div className="c"></div> : undefined}
            </div>
        );
    }
}

这将呈现第一个div，无论如何，然后只有第二个和第三个基于＆＃34;条件＆＃34;是真的。

如何在返回数组的return语句中使用三元运算符

4 个答案: