返回变量时使用三元运算符而不是 if 语句答案

【问题标题】：Using ternary operators instead of if statement when returning variable返回变量时使用三元运算符而不是 if 语句
【发布时间】：2017-07-11 18:51:32
【问题描述】：

如何简化这个条件语句？ Return 语句被多次使用。在这种情况下可以使用例如三元运算符吗？

返回 null 是隐藏组件的正确方法吗？

import Item from './Item';

const Component = ({data, onChange}) => {

    if (data) {
        const items = data.map(( item ) => {
            return <Item onChange={ onChange } />
        });

        return(
            <ul>{items}</ul>
        );

    } else {
        return(null);
    }
}

export default Component;

【问题讨论】：

早点回来。从 else 中取出 return，将其粘贴在 if(!data) 内的顶部，然后删除另一个 if 语句。
简化了？几乎不。缩短？当然，像往常一样。

标签： javascript reactjs

【解决方案1】：

返回 null 是隐藏组件的正确方法吗？

是的，返回 null 是 React 组件的有效返回值。见官方文档this section：

忽略布尔值、空值和未定义

false、null、undefined 和 true 是有效的子级。它们根本不渲染。

你可以稍微缩短你的代码：

const Component = ({data, onChange}) => (
  data && data.length ? <ul>
    {data.map(( item ) => <Item onChange={ onChange } />)}
  </ul> : null
)

但是请注意，您没有在 <Item> 中使用 item。这是故意的吗？如果是这样，您可以改为：{data.map(() => <Item onChange={ onChange } />)}

另请注意，您需要为每个<Item> 提供key 属性。我还没有将它添加到我的 sn-p 中，但您可以阅读更多关于 key 道具的信息，here。

【讨论】：

你也可以去掉 item 周围的括号，因为它是一个单参数函数。此外，如果您没有在箭头函数中使用块，则可以删除 return 关键字。
@NimrodArgov，是的，我错过了return。解决了，谢谢。我喜欢保留括号，但这只是个人喜好。

【解决方案2】：

我没能运行它，所以那里可能有一个错误，但是这样的东西合适吗？

const Component = ({data, onChange}) => {

  function returnItems(data){
    data.map(( item ) => <Item onChange={ onChange } />
    return(<ul>{items}</ul>);
  }

  const items = data ? returnItems(data) : null;
}

【讨论】：