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

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，这将在数组中创建以 null 作为值的索引。