Динамически добавить еще один компонент в реакции

Question

На самом деле мой код очень сложный, но для простоты я ставлю этот пример:

У меня есть два компонента реакции:

Component_A:

import React, {PropTypes} from 'react'; 

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

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

export default Component_A; 

Component_B:

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; 

App файла:

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_A в Component_B. Есть ли для этого решение?

Большинство из вас может видеть этот смешной и совет, чтобы сделать это с помощью государственного средства реагирования. но, как я написал выше, это очень сложный проект. поэтому нам будет очень легко, если мы сможем это сделать с append.

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_A к Component_B:

//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; 

Вы всегда можете вернуться null из компонента чтобы скрыть HTML

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