将组件标记作为反应原生的道具(Pass component tag as a props in react native)

将组件标记作为反应原生的道具(Pass component tag as a props in react native)

这可能是一个愚蠢的问题，但我想知道是否有任何方式将组件作为道具传递给组件tag。像这样的东西

const Main = (props) => { return ( <header> main </header> <Content> <{props.homePage} /> //this should be like this <Home /> </Content> <Footer> </Footer> ); };

我有一个包含页眉，内容和页脚的主页面，我想动态地改变内容中的组件。但是每当我将这个组件作为道具传递时，都会将它作为原始文本并给我一个错误。 请告诉我，如果这种方法是正确的方式，或者如果我不得不使用另一种方式。

It could be a silly question but I was wondering is there any way to pass a component as props to component tag.something like this

const Main = (props) => { return ( <header> main </header> <Content> <{props.homePage} /> //this should be like this <Home /> </Content> <Footer> </Footer> ); };

I have a main page that contains header, content, and footer and I want to change dynamically the component in the content.but whenever I pass the component as props react take it as a raw text and give me an error. Please, tell me if this method is the correct way or if I have to use another way.

最满意答案

你非常接近，它应该看起来像这样：

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'));

You were very very close, it should look something like:

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

As an alternative, and probably a bit more natural is to leverage children:

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'));