React.jsを使って自作のサイトを構築中なのですが、ファイル間でのコンポーネントをどのように扱うかで迷ってしまったので質問させてください。
たとえば、ヘッダーだけなら、header.jsxとして
var React = require('react'); var Header = React.createClass({ render: function() { return ( <div>ヘッダー</div> ); } }); module.exports = Header;
と記述し、main.jsで
var React = require('react'); var ReactDOM = require('react-dom'); var Header = require('./header.jsx'); ReactDOM.render( <Header />, document.getElementById('header') );
のようにすれば反映されることは確認したのですが、
たとえば、common.jsxと名前をつけたファイルにコンポーネントをいくつか記述して、
main.jsでそのうちの任意のコンポーネントだけを読み込むことはできるのでしょうか。
やりたいことは、、、
common.jsx
var React = require('react'); var AAA= React.createClass({ render: function() { return ( <div>AAA</div> ); } }); var BBB= React.createClass({ render: function() { return ( <div>BBB</div> ); } }); var CCC= React.createClass({ render: function() { return ( <div>CCC</div> ); } }); ??? module.exports = AAA; module.exports = BBB; module.exports = CCC;
main.js
var React = require('react'); var ReactDOM = require('react-dom'); ??? var common = require('./common.jsx'); ReactDOM.render( <AAA />, document.getElementById('AAA') ); ReactDOM.render( <CCC />, document.getElementById('CCC') );
のような感じです。
もしできないようであれば、コンポーネントごとにファイル分けすることになるのでしょうか。
恐れ入りますが、ご教示いただけたら幸いです。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/24 16:03