阵营JS - 道具通过嵌套组件

我在写ReactJS一个容器组件和我传递一个道具该组件将被渲染为“主”的内容，就像这样：阵营JS - 道具通过嵌套组件

class RegistrationContainer extends Component { 

    render() { 
     const MainContent = this.props.mainContent; 

     return (
      <Row> 
       <Col offset="lg-3" lg={6}> 
        <MainContent /> 
       </Col> 
      </Row> 
     ); 
    } 

} 

export default RegistrationContainer;

而且我passsing给它一个mainContent道具，像这样：

import RegistrationContainer from './RegistrationContainer'; 
import RegistrationEntryView from './RegistrationEntryView'; 

class RegistrationCodeEntry extends Component { 

    render() { 
     return (
      <RegistrationContainer mainContent={RegistrationEntryView} /> 
     ); 
    } 
} 

export default RegistrationCodeEntry;

我的问题是，我想RegistrationEntryView有道具，但似乎无法弄清楚如何定义/传中它道具。如果我这样做，我得到一个错误：

class RegistrationCodeEntry extends Component { 

    render() { 
     const RegistrationView = <RegistrationEntryView someProp="blah" /> ; 
     return (
      <RegistrationContainer mainContent={RegistrationView} /> 
     ); 
    } 
} 

export default RegistrationCodeEntry;

错误如下：

invariant.js?7313:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of RegistrationContainer .

这是一些this.props.children能解决？我一直在努力让自己的头脑围绕这个概念，所以任何有关我出错的建议都将不胜感激。

来源

2017-10-05 deanmau5

我觉得'this.props.children'可以解决你的问题。在RegistrationCodeEntry的'render（）'方法中返回somethng：'return（）;' – samAlvin

谢谢，这正是我之后。 – deanmau5

你可以这样

class RegistrationCodeEntry extends Component { 

    render() { 
    return (
     <RegistrationContainer> 
      // Render it as children 
      <RegistrationEntryView someProp="blah" /> 
     </RegistrationContainer> 
    ); 
    } 
}

与this.props.children解决这个问题，然后在你的容器

class RegistrationContainer extends Component { 

    render() { 

    const MainContent = this.props.mainContent; 

    return (
    <Row> 
     <Col offset="lg-3" lg={6}> 
     // Render the passed children 
     {this.props.children} 
     </Col> 
    </Row> 
); 
} 
}

来源

2017-10-05 09:41:25

谢谢，这正是我之后的事情。 – deanmau5

你的做法是正确的。你只是去错在这里：

<Row> 
    <Col offset="lg-3" lg={6}> 
    <MainContent /> 
    </Col> 
</Row>

而是做到这一点：

<Row> 
    <Col offset="lg-3" lg={6}> 
    { MainContent } 
    </Col> 
</Row>

我个人认为，这种方法比使用儿童更好。

当你这样做 - const RegistrationView = <RegistrationEntryView someProp="blah" /> ;该组件已被渲染并转换为适当的格式。因此，您不能用<MainContent />重新渲染它。所以在这种情况下使用{}是正确的。

祝你好运！

来源

2017-10-05 10:16:53 Karan

阵营JS - 道具通过嵌套组件

回答

相关问题