延迟渲染React组件

Question

我有一个React组件，其中有许多子组件。我不希望立即渲染子组件，而是要经过一段时间的延迟（对于每个子组件而言，它们是统一的还是不同的）。

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

Answer 1

我认为最直观的方法是给孩子一个“ wait”
prop，在从父代传递过来的持续时间内隐藏该组件。通过将默认状态设置为隐藏，React仍会立即渲染组件，但是直到状态更改后它才可见。然后，您可以设置componentWillMount为调用一个函数，以在通过道具传递的持续时间之后显示它。

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>
        )
    }
});

然后，在“父级”组件中，您需要做的就是传递希望子级显示之前等待的持续时间。

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>
        )
    }
});

这是一个演示