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

Question

如何简化这个条件语句？ 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;

Answer 1

Is returning null a proper way to hide Components?

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

Booleans, Null, and Undefined Are Ignored

false, null, undefined, and true are valid children. They simply don't render.

---

不过您可以稍微缩短您的代码:

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

但是请注意，您没有使用 item里面<Item> .那是故意的吗？如果是这样，您可以改写:{data.map(() => <Item onChange={ onChange } />)}

另请注意，您需要提供 key每个属性 <Item> .我没有将其添加到我的代码片段中，但您可以阅读有关 key 的更多信息 Prop ，here .