reactjs – 传递组件标签作为反应原生的道具

发布时间：2020-12-15 16:18:14 所属栏目：百科来源：网络整理

导读：这可能是一个愚蠢的问题,但我想知道有没有办法将组件作为道具传递给组件tag.something像这样 const Main = (props) = { return ( header main /header Content {props.homePage} / //this should be like this Home / /Content Footer /Footer );}; 我有一个

这可能是一个愚蠢的问题,但我想知道有没有办法将组件作为道具传递给组件tag.something像这样

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!