如何将新的 React Component 渲染成 rendered 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 上有一个 state 来告诉要呈现哪个子组件。为简单起见，我将其称为 childComponentName，它可以将 firstComponent 和 secondComponent 作为字符串保存。在你的 this.clickHandler 上，你应该这样做：

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

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

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

您只能在非常特定的情况下手动安装和卸载组件。对于所有其他人，这是要走的路。

如何将新的 React Component 渲染成 rendered DOM？

How to render new React Component into rendered DOM?

flux

reactjs

reactjs-flux