这可能是一个愚蠢的问题,但我想知道有没有办法将组件作为道具传递给组件tag.something像这样 const Main = (props) = { return ( header main /header Content {props.homePage} / //this should be like this Home / /C
const Main = (props) => { return ( <header> main </header> <Content> <{props.homePage} /> //this should be like this <Home /> </Content> <Footer> </Footer> ); };
我有一个包含标题,内容和页脚的主页面,我想动态更改内容中的组件.但每当我通过组件作为道具反应时,将其作为原始文本并给我一个错误.请告诉我这种方法是否正确,或者我是否必须采用其他方法.
你非常接近,它应该看起来像: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'));