Question

我对ReactJS提出了一般性问题：

是否可以在成功呈现所有JSX组件（<div> components </div>）后立即触发方法？因此，如果某些只在特定条件下呈现，我可以在所有方法都true后立即触发方法。

我如何检查一切是否成功呈现？

Answer 1

有一个生命周期方法componentDidMount会在反应渲染组件后立即被调用，它将被调用一次，只有在初始渲染之后，我认为你可以使用该方法。

根据DOC：

componentDidMount（）在组件出现后立即调用安装。需要DOM节点的初始化应该放在这里。如果你需要从远程端点加载数据，这是一个好地方实例化网络请求。在这种方法中设置状态会触发重新渲染。

关于第二个问题：

你是在某些条件的基础上渲染元素，我假设你正在使用某种bool或检查数组的长度，所以有一个生命周期方法componentWillUpdate，它会被调用之前如果所有条件都为真，则在此方法中，您可以检查所有条件并调用任何方法，react会重新渲染组件（在初始渲染时不会调用它）。因此，无论何时执行setState，它都会被调用，您可以将逻辑放在此处。

Answer 2

这只是一个骨架，但它应该可以帮助您找到您正在寻找的解决方案：

type ChildProps = {
    onUpdated: () => void;
}

class MyChildComponent extends React.component<ChildProps, void> {
    componentDidUpdate() {
        this.props.onUpdated();
    }

    render() {
        ...
    }
}

class MyComponent extends React.Component<void, void> {
    private childCount: number;
    private updated: number;

    constructor() {
        this.childCount = 2;
    }

    render() {
        this.updated = 0;

        return (
            <div>
                <MyChildComponent onUpdated={ this.childUpdated.bind(this) } />
                <MyChildComponent onUpdated={ this.childUpdated.bind(this) } />
            </div>
        );
    }

    private childUpdated() {
        this.updated++;
        if (this.updated === this.childCount) {
            // do something...
        }
    }
}

ReactJS：呈现Component时的Fire方法

2 个答案: