React~render( )について~

renderには2種類のrenderメソッドがあります。

ReactDOM.render()はReactエレメントをドキュメント(生成されるHTML等の文書)にレンダリングする役割です。
Reactコンポーネントのクラスで呼び出されているrenderでは、JSXなどで定義されたReactエレメントを返す処理を行っています。

レンダリング(コードから、画像や動画、文字を生成すること)が目的のメソッドなので、その他の処理を持たせないようにすることが大事！！

・render()で返すコンポーネントは、単一の親でなければならない。

renderメソッドで返すのは単一の親のコンポーネントであり、複数の親のコンポーネントを返すことはできません。
必ず1つの親になるように包みましょう。

// エラーになる
render(){
  return(
    <div>aaa</div>
    <div>bbb</div>
  );
}

// 正常
render(){
  return(
    <div>
      <div>aaa</div>
      <div>bbb</div>
    </div>
  );
}

・renderで空を返す
子コンポーネントで親から渡されたデータによって空のコンポーネントを返したい場合があります。
そんな時は、空のHTML要素を使わなくてもnullかfalseで返せます。(ただし、undefinedは使えません)

など色々なやり方？があるようです。

参考文献：https://qiita.com/endam/items/1bde821c4b29f9b663da

https://mabui.org/react-render-description/

以上です。

もりけん塾
もりけん先生ブログ

コメント