やり方はケースバイケースなのでいろんなやり方出来ますが、今回のようなケースであれば、以下のようなやり方で良いかなと思います。
import React from 'react';
import { render } from 'react-dom';
const Header = () => {
return <nav><ul><li>1</li></ul></nav>
}
const Body1 = () => {
return <div>Hello Body1</div>
}
const Body2 = () => {
return <div>Hello Body2</div>
}
// パターンA
class LayoutA extends React.Component {
render() {
return (
<div>
<Header />
{this.props.body}
</div>
)
}
}
// パターンB
class LayoutB extends React.Component {
render() {
return (
<div>
<Header />
{this.props.children}
</div>
)
}
}
class App extends React.Component {
render() {
return (
<div>
//propsで切り替えたいコンポーネントを渡すAパターン
<LayoutA body={<Body1 />} />
//props.childrenで渡すBパターン
<LayoutB>
<Body1 />
</LayoutB>
</div>
)
}
}
render(<App />, document.getElementById('root'));
今回の質問はレイアウトの話だと思いますが、Reactにatomic designの考え方を取り入れて、atom, molecule, organism, page, template単位でコンポーネントを作って、今回みたいなことをやるというのも良いかと思います。
追記
パターンAの別バージョンも書いてみました。
const Header = () => {
return (
<nav>
<ul>
<li>1</li>
</ul>
</nav>
);
};
const Body1 = ({ content }) => {
return <div>{ content }</div>;
};
class LayoutA extends React.Component {
render() {
const {
Component,
...props
} = this.props.body;
return (
<div>
<Header />
<Component { ...props } />
</div>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<LayoutA body={{ Component: Body1, content: 'Hello Body1' }} />
</div>
);
}
}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/28 23:52