Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React で Stateless Functional Component の書き方を盛大に...

takf
December 06, 2018

React で Stateless Functional Component の書き方を盛大に間違えていた話

takf

December 06, 2018
Tweet

More Decks by takf

Other Decks in Programming

Transcript

  1. ステートレスでいい例 const SomethingComponent = (props) => ( <div> <p>こんにちは、{props.name}</p> <p>Hello,

    {props.name}</p> <p>¡Hola!, {props.name}</p> <p>你好, {props.name}</p> <p>Здравствуйте, {props.name}</p> </div> ) //自らで入力インタフェースを持たない。プレゼンテーションにしか影響し ない。
  2. おとなしく Class Component で書き直しました。 ・入力内容はそれぞれのローカルステートで保つ ・親の Class Component から言語コードだけ注入を受け付ける (例)

    <MessageBox langCode={“ja”} /> <MessageBox langCode={“en”} /> <MessageBox langCode={“ch”} /> <MessageBox langCode={“es”} /> <MessageBox langCode={“ru”} /> ・定型文が選ばれたら action を発行 -> 他の textbox に対応する文を自動挿入
  3. おとなしく Class Component で書き直しました。 ・定型文、言語コードを Redux の Store に持つ (例)

    templates : { langCode : [“ja”, ”en”], texts: [“おはよう”, “こんにちは”, “さようなら”], [“Good Morning”, “Hello”, “Bye”] } ・定型文が選ばれたら action を発行 -> 他の textbox に対応する文を自動挿入