Reactメモ ~~

Reactのメモ2です

propsの指定

JavaScript式

任意のJavaScript式は{}で囲むことによってpropsとして渡すことができます。

<MyComponent foo={1+2+3+4}/>

MyComponentというコンポーネントのpropsのfooに10が与えられる。

if文やfor文はJavaScriptでは文ではないらしいので{}の中で使うことができないので、JSX記法の近くで間接的に用いるらしい。

    function Number(props){
      let description;
      if(props.number %2 == 0){
        description=<strong>even</strong>;
      } else{
        description = <i>odd</i>;
      }
      return <div>{props.number} is an {description} number </div>;
    }

文字列リテラル

文字列リテラルをpropsに与える場合、以下は同じである。

    <MyComponent message="hello world" />
    
    <MyComponent message={'hello world'} />

プロパティのデフォルトはtrue

プロパティのデフォルトはtrueであるため、以下は同じである。

    <MyTextBox autocomplete />
    
    <MyTextBox autocomplete={true} />

しかし、値の省略は推奨してないらしいので、省略はしないように。

propsのスプレッド構文

props オブジェクトがあらかじめ存在しており、それを JSX に渡したいような場合は ... を「スプレッド」演算子として使用することで、props オブジェクトそのものを渡すことができます。

以下は同じである。

    function App1(){
      return <Greeting firestName="Ken" lastName="Sato" />; 
    }
    
    function App2(){
      const props = {firstName:'Ken', lastName'Sato'};
      return <Greeting {...props} />;
    }

また、必要なプロパティのみ取り出して、残りをスプレッド構文でまとめることもできます。