(インデントが崩れてしまうのは自分が使っているwordpressプラグインの仕様のようです…困った)
//1.基本形 //もしこの例の用に、JSXを返すだけであれば3.省略形を使ってもいい import React from 'react'; const App = ()=> { return ( <div>This is App component</div> ); }; export default App;
//2.propsを受け取る場合 また関数や変数を持たせる場合 //classで書いた場合と異なり、thisの扱いをしなくていいので、楽 //stateをもたせる必要がなければこれでいい import React from "react"; const App = ({ name }) => { const mrName = "Mr. " + name; const alertName = name => { alert(name); }; return ( <div> <div> this is Component {mrName} </div> <button onClick={() => { alertName(name); }} /> </div> ); }; export default App;
//3.省略形 //単にjsxを返すだけであれば、これが一番シンプルな記述 import React from 'react'; const App = ()=> ( <div>This is App component</div> ); export default App;
1 thought on “React / Functional Component の書き方のバリエーション”