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

Posted 2021-04-14

我使用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语句之外没有任何额外的方法或条件语句？

谢谢你的阅读。

答案

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

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

请记住，如果条件为false，这将创建带有null作为数组值的索引。

另一答案

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

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

另一答案

你可以简单地做到

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

另一答案

看起来你基本上拥有它！

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，然后只有第二个和第三个基于“条件”为真。