如何将新的 React 组件渲染到渲染的 DOM 中？

Question

我有 3 个父组件和 2 个子组件：

import React from 'react';
import FirstChild from './FirstChild';
import SecondChild from './SecondChild';

export default class ComponentName extends React.Component {
    render() {
        return (
            <div>
                <h1>ComponentName</h1>
                <div id="renderChildHere">
                    <FirstChild />
                </div>
                <button onClick={this.clickHandler}>Replace FirstChild with SecondChild</button>
            </div>
        );
    }

    clickHandler() {
        ???
    }
}

FirstChild 最初被渲染。如何卸载它并将 SecondComponent 安装在 #renderChildHere Dom 元素中？

我使用没有第三方插件的 React 0.13.3 和 Flux。

Answer 1

你应该在ComponentName 上有一个状态，告诉你要渲染哪个子组件。为简单起见，我将其命名为childComponentName，它可以将firstComponent 和secondComponent 保存为字符串。在您的 this.clickHandler 上，您应该执行以下操作：

this.setState({childComponentName: 'secondComponent'});

现在 React 将再次渲染 ComponentName。在render方法中，您可以根据childComponentName状态的值来选择是渲染<FirstComponent/>还是<SecondComponent/>。

当然这只是为了简单，所以你可以理解这个概念。

您只会在非常特定的场景中手动挂载和卸载组件。对于所有其他人来说，这是要走的路。