这可能是一个愚蠢的问题,但我想知道有没有办法将组件作为道具传递给组件tag.something像这样
const Main = (props) => {
return (
<header>
main
</header>
<Content>
<{props.homePage} /> //this should be like this <Home />
</Content>
<Footer>
</Footer>
);
};
我有一个包含标题,内容和页脚的主页面,我想动态更改内容中的组件。但每当我将组件作为道具反应传递时,请将其作为原始文本并给我一个错误。请告诉我这种方法是否正确,或者我是否必须采用其他方式。
答案 0 :(得分:7)
你非常接近,它应该看起来像:
const Page1 = (props) => <div>my first page</div>;
const Main = (props) => <div>{props.content}</div>;
class App extends React.Component {
render () {
return (
<div>
Header
<Main content={<Page1 />} />
Footer
</div>
);
}
}
ReactDOM.render(<App/>,document.getElementById('root'));
http://codepen.io/cjke/pen/VPYJpK?editors=0010
作为替代方案,并且可能更自然地利用儿童:
const Page1 = (props) => <div>my first page</div>;
const Main = (props) => <div>{props.children}</div>;
class App extends React.Component {
render () {
return (
<div>
Header
<Main><Page1 /></Main>
Footer
</div>
);
}
}
ReactDOM.render(<App/>,document.getElementById('root'));