reactjs - 在 React Native 中将组件标签作为 props 传递

Question

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

const Main = (props) => {
 return (
  <header>
    main
  </header>

   <Content>
     <{props.homePage} /> //this should be like this <Home />
   </Content>

 <Footer>
 </Footer>
 );
};

我有一个包含页眉、内容和页脚的主页，我想动态更改内容中的组件。但是每当我将组件作为 props 传递时， react 都会将其作为原始文本并给我一个错误。请告诉我这个方法是否正确，或者我是否必须使用其他方法。

Answer 1

你非常非常接近，它应该看起来像:

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

作为替代方案，也许更自然的是利用 child :

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