変数を返すときに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

コンポーネントを非表示にするには、ヌル適切な方法を返していますか？

はい、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プロパティを指定する必要があります。私はそれを自分のスニペットに追加していませんが、key小物hereについて詳しく読むことができます。

Answer 2

私はそれを実行しませんでしたので、どこかにバグがあるかもしれませんが、このようなものが適していますか？

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

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

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