Reactjs動的コンポーネントを他のコンポーネントに追加する

Question

reactjsを使用してwebappを開発しようとしていますが、問題があります。 1日以上の研究の後、私はどのように行うのか分かりません。

私のページのメインレイアウトであるコンポーネントを使用して、他のコンポーネントを追加して表示したいと考えています。

コンポーネントBase2では、子プロップに別のコンポーネントが含まれています。

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { Link, NavLink } from 'react-router-dom'; 

const Base2 = (child) => (

    <div> 
     <div className="top-bar"> 
      <div className="top-bar-left"> 
       <NavLink to="/">React App</NavLink> 
      </div> 

      <div className="top-bar-right"> 
       <Link to="/login">Log in</Link> 
      </div> 

     </div> 

     <child/> // HERE the dynamic component 

    </div> 
); 

export default Base2; 

それを呼び出す関数は次のとおりです。

const TestBase = ({props}) => { 
    return (<Base child={MyComponent}/>) 
}; 

またMyComponentのは、クラス宣言することができ2つの方法以下：

import React from 'react'; 
import LoginForm from '../components/LoginForm.jsx'; 

class MyComponent extends React.Component{ 
    constructor(props) { 
     super(props); 
    ... 
    } 
    render() { 
     return (
      <LoginForm 
       onSubmit={this.processForm} 
       onChange={this.changeUser} 
       errors={this.state.errors} 
       user={this.state.user} 
      /> 
     ); 
    } 

} 

export default LoginPage; 

第二の方法：

import React from 'react'; 
import { Card, CardTitle } from 'material-ui/Card'; 

const MyComponent = { 
    render() { 
     return (<Card className="container"> 
      <CardTitle title="React Application" subtitle="Home   page." /> 
     </Card>); 
    } 
}; 

export default MyComponent ; 

私の中にテスト、セコだけメソッドが機能します。 2番目の方法の「インスタンス」（私が推測するようなもの）の欠如が問題かもしれませんか？ これらの2種類のコンポーネント宣言をとるために、どのようにしてBase2コンポーネントを開発できますか？ props.childによってBASE2コンポーネント、あなたがBASE2コンポーネントを書いた方法で、子（単に引数内renderそして、それを

<Base child={<MyComponent/>}/> 

：あなたの助けを事前に

おかげ

Answer 1

は、まず、このようなコンポーネントを渡します名前）は、propsに渡すコンポーネントではなく、propsの値を直接持ちません。

はこのようにそれを書く：第2の方法では

const Base2 = (props) => ( 
    <div> 
     <div className="top-bar"> 
      <div className="top-bar-left"> 
       <NavLink to="/">React App</NavLink> 
      </div> 

      <div className="top-bar-right"> 
       <Link to="/login">Log in</Link> 
      </div> 
     </div> 

     {props.child} //here 

    </div> 
); 

Answer 2

をレンダリングする方法を含む単純なJSONのようです。 es5で書かれているように見える2番目のメソッドのコンポーネントを作成するには、react.createClass（{render ...}）を使用する必要があります インターネットでシークすると、多くのes5の例が見つかります

Answer 3

@ Mayank Shukla私は最善の方法を見つけました。

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { Link, NavLink } from 'react-router-dom'; 

const Base2 = (props) => (

    <div> 
     <div className="top-bar"> 
      <div className="top-bar-left"> 
       <NavLink to="/">React App</NavLink> 
      </div> 

      <div className="top-bar-right"> 
       <Link to="/login">Log in</Link> 
      </div> 

     </div> 

     {props.child} 

    </div> 
); 

export default Base2; 

それを呼び出す関数は次のとおりです。

const TestBase = (props) => { 
    return (<Base2 child={<MyComponent/>}/>) 
}; 

まず方法：

import React from 'react'; 
import LoginForm from '../components/LoginForm.jsx'; 

class MyComponent extends React.Component{ 
    constructor(props) { 
     super(props); 
    ... 
    } 
    render() { 
     return (
      <LoginForm 
       onSubmit={this.processForm} 
       onChange={this.changeUser} 
       errors={this.state.errors} 
       user={this.state.user} 
      /> 
     ); 
    } 

} 

export default LoginPage; 

第二の方法：

import React from 'react'; 
import { Card, CardTitle } from 'material-ui/Card'; 

const MyComponent = (props) =>{ 

     return (<Card className="container"> 
      <CardTitle title="React Application" subtitle="Home   page." /> 
     </Card>); 

}; 

export default MyComponent ;