は動的に実際に私のコードは非常に複雑であるが、簡略化のために、私はこの例を入れています

Question

を反応させるのに別のコンポーネントを追加します

import React, {PropTypes} from 'react'; 

class Component_B extends React.Component { 
    constructor(props, context){ 
     super(props, context); 
    } 

    render(){ 
     return (
      <div></div> 
     ); 
    } 
} 

export default Component_B; 

アプリケーションファイル：

import React, {PropTypes} from 'react'; 
import Component_B from './Component_B'; 

class App extends React.Component { 
    render() { 
     return (
      <div> 
       <Component_A /> 
       <Component_B /> 
      </div> 
     ); 
    } 
} 

export default App; 

インデックスファイル：

import React from 'react'; 
import { render } from 'react-dom'; 
import App from './App'; 

render(
    <App />, 
    document.getElementById('app') 
); 

ページのレンダリング今後は、と私はがComponent_Bに Component_Aを追加したい、その時点で、サーバからの呼び出しを取得します。そのための解決策はありますか？

あなたの大部分は、このばかげたことを見ることができ、反応の州立施設でそれをするアドバイスをします。しかし、私はこれを書いているので、これは非常に複雑なプロジェクトです。 にを追加すれば、非常に簡単になります。

Answer 1

このソリューションは、プロジェクトのアーキテクチャに完全に依存します。任意の時点でコンポーネントを条件付きでレンダリングできます。私が正しくあなたを理解している場合、あなたはこのようにそれを行うことができます。

//Component_A: 
import React, {PropTypes} from 'react'; 

class Component_A extends React.Component { 
    render(){ 
    return (
     <div>Component A</div> 
    ); 
    } 
} 

export default Component_A; 


//Component_B: 
import React, {PropTypes} from 'react'; 

class Component_B extends React.Component { 
    render(){ 
    return (
     <div>{this.props.children}</div> 
    ); 
    } 
} 

export default Component_B; 

//app 

import React, {PropTypes} from 'react'; 
import Component_A from './Component_A'; 
import Component_B from './Component_B'; 

class App extends React.Component { 

    componentWillMount() { 
    api.fetchData().then(data => { 
     this.setState({data}); 
    }) 
    } 

render() { 
    return (
     <div> 
     <Component_B/> 
      {this.state.data && <Component_A />} 
     </Component_B> 
     </div> 
    ); 
    } 
} 

export default App; 

それともComponent_BにComponent_Aを移動することができます。

//Component_A: 
import React, {PropTypes} from 'react'; 

class Component_A extends React.Component { 
    render(){ 
    return (
     <div>Component A</div> 
    ); 
    } 
} 

export default Component_A; 


//Component_B: 
import React, {PropTypes} from 'react'; 
import Component_A from './Component_A'; 

class Component_B extends React.Component { 
    render(){ 
    if (!this.props.data) { 
     return (
     <div>Loading...</div> 
    ); 
    } 
    return (
     <div> 
     <Component_B /> 
     </div> 
    ); 
    } 
} 

export default Component_B; 

//app 

import React, {PropTypes} from 'react'; 
import Component_B from './Component_B'; 

class App extends React.Component { 

    componentWillMount() { 
    api.fetchData().then(data => { 
     this.setState({data}); 
    }) 
    } 

render() { 
    return (
     <div> 
     <Component_B data={this.state.data} /> 
     </div> 
    ); 
    } 
} 

export default App; 

をあなたは常にそのHTML

class Component_A extends React.Component { 
    render(){ 
    if (!this.props.visible) return null; 
    return (
     <div>Component A</div> 
    ); 
    } 
} 

を非表示にするコンポーネントから nullを返すことができます