在react中動態添加另一個組件

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;

應用文件：

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