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

【问题标题】：How to use ternary operator in return statement that returns an array如何在返回数组的return语句中使用三元运算符
【发布时间】：2018-05-30 14:32:59
【问题描述】：

我使用 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 语句之外不使用任何额外的方法或条件语句来做到这一点？

感谢您的阅读。

【问题讨论】：

我犯了一个愚蠢的错误哈哈！！谢谢大家。

标签： javascript arrays reactjs return

【解决方案1】：

看来你基本上已经拥有了！

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，然后根据“条件”为真只渲染第二个和第三个。

【讨论】：

你不能在 React 中做到这一点。你需要一个单亲或使用一个数组。
抱歉忘记了 div 包装器

【解决方案2】：

你可以这样做

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

@ibrahimmahrir 我没有说它会创建一个对象，我说它会被视为一个对象，并且由于对象内部的语法无效它会引发错误

【解决方案4】：

你在一个数组中，而不是 JSX。不用花括号，只要做三元运算，后面加逗号即可。

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

请记住，如果条件为假，这将在数组中创建以 null 作为其值的索引。

【讨论】：