Question

我有三个组件父和两个孩子：

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

您应该在<tr ng-repeat="ass in assetb track by $index"> <td>{{ass.runway.number}}</td> </tr>上有一个状态，告诉哪个子组件要呈现。为简单起见，我将其称为ComponentName，它可以将childComponentName和firstComponent作为字符串。在secondComponent上，您应该执行以下操作：

this.clickHandler

现在React将再次呈现this.setState({childComponentName: 'secondComponent'});。在ComponentName方法中，您可以根据render州的值选择是否呈现<FirstComponent/>或<SecondComponent/>。

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

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

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

1 个答案: