Reactjs React 组件的延迟渲染

我认为最直观的方法是给子元素们一个"wait"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>
        )
    }
});

然后，在父组件中，只需传递希望子组件在显示之前等待的持续时间.

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