javascript - React 组件的延迟渲染

Question

我有一个 React 组件，其中包含许多子组件。我不想立即渲染子组件，而是在延迟一段时间后渲染(每个子组件统一或不同)。

我想知道 - 有没有办法做到这一点？

Answer 1

我认为最直观的方法是给 child 一个“等待”prop，它会在从父级传递下来的持续时间内隐藏组件。通过将默认状态设置为隐藏，React 仍将立即渲染组件，但在状态更改之前它不会可见。然后，您可以设置 componentWillMount 来调用一个函数以在通过 props 传递的持续时间后显示它。

var Child = React.createClass({
    getInitialState : function () {
        return({hidden : "hidden"});
    },
    componentWillMount : function () {
        var that = this;
        setTimeout(function() {
            that.show();
        }, that.props.wait);
    },
    show : function () {
        this.setState({hidden : ""});
    },
    render : function () {
        return (
            <div className={this.state.hidden}>
                <p>Child</p>
            </div>
        )
    }
});

然后，在 Parent 组件中，您需要做的就是传递您希望 Child 在显示它之前等待的持续时间。

var Parent = React.createClass({
    render : function () {
        return (
            <div className="parent">
                <p>Parent</p>
                <div className="child-list">
                    <Child wait={1000} />
                    <Child wait={3000} />
                    <Child wait={5000} />
                </div>
            </div>
        )
    }
});

Here's a demo