React.js - 如何在子组件中实现一个功能以从同一个父级卸载另一个子级，并在其位置上安装另一个组件？答案

【问题标题】：React.js - How to implement a function in a child component to unmount another child from the same parent, and mount another component on it's place?React.js - 如何在子组件中实现一个功能以从同一个父级卸载另一个子级，并在其位置上安装另一个组件？
【发布时间】：2018-02-14 03:35:33
【问题描述】：

例如，像这样的组件：

import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
  render() {
    return (
      <div className="App">
        <BodyContent />
        <BottomOne />
      </div>
    );
  }
}

export default App;

我想在BodyContent 上实现一个函数，该函数卸载BottomOne 并改为安装BottomTwo，所以当我激活该函数时，代码被重组为：

import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
  render() {
    return (
      <div className="App">
        <BodyContent />
        <BottomTwo />
      </div>
    );
  }
}

export default App;

我对 React 很陌生，所以如果有更好的方法，我愿意接受建议，但我真的需要最终结果，即在 BodyContent 上卸载 BottomOne 并安装 BottomTwo 的函数.

【问题讨论】：

标签： javascript reactjs virtual-dom

【解决方案1】：

您可以使用state 或props 来渲染不同的组件。

示例：

import React, {
    Component
}
from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            decider: false
        };
    }
    render() {
        const bottomContent = this.state.decider === true ? <BottomOne /> : <BottomTwo />;
        return (
            <div className="App">
                <BodyContent />
                { bottomContent }
            </div>
        );
    }
}
export
default App;

【讨论】：

【解决方案2】：

您可以维护一个状态，该状态告诉您要渲染哪个组件。大概是这样的

import React, { Component } from 'react';
import BodyContent from './BodyContent';
import BottomOne from './BottomOne';
import BottomTwo from './BottomTwo';
class App extends Component {
  changeBottomComponent = (comp) => {
    this.setState({ showBottom: comp})
  }
  render() {
    return (
      <div className="App">
        <BodyContent changeBottomComponent={this.changeBottomComponent}/>
        {this.state.showBottom === 1 ? <BottomOne /> : <BotttomTwo />}

      </div>
    );
  }
}

export default App;

【讨论】：

【解决方案3】：

为了实现在父组件中维护一个状态变量（组件的某种标识符）并使用该状态变量来呈现不同的组件。

除此之外，您还需要从父级向子级传递一个函数，并使用该函数更新父级状态值。

像这样：

class App extends Component {
  constructor(){
    super();
    this.state={
      renderOne: true,
    }
    this.update = this.update.bind(this);
  }

  update(){
      this.setState({renderOne: false})
  }

  render() {
    return (
      <div className="App">
        <BodyContent update={this.update}/>
        {this.state.renderOne?  <BottomOne />  : <BottomTwo/> }
      </div>
    );
  }
}

现在在BodyContent 组件内部调用this.props.update() 来渲染另一个组件。

【讨论】：

如果组件也有状态，你建议我如何维护它们？我正在考虑将它们存储在 App 组件中，并将它们作为道具传递。这是正确的做法吗？
您想在卸载后存储子状态值吗？如果是，那么是的，您可以将它们存储在父组件中并传入道具，或者如果您使用的是 redux/flux，则将这些值保存在存储中。
是的，我想在卸载后存储它们。我明白了，谢谢。

【解决方案4】：

您也可以直接使用状态中的组件并渲染它们。这样可以更灵活。

const BottomOne = () => <div>BottomOne</div>;
const BottomTwo = () => <div>BottomTwo</div>;

class Example extends React.Component {
  constructor() {
    super();
    this.state = { show: BottomOne };
    this.toggleComponent = this.toggleComponent.bind(this);
  }

  toggleComponent() {
    // Use whatever logic here to decide.
    let show = BottomOne;
    if (this.state.show === BottomOne) {
      show = BottomTwo;
    }

    this.setState({ show });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleComponent}>Change</button>
        <this.state.show />
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：