小编典典

延迟渲染React组件

reactjs

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

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


阅读 1575

收藏
2020-07-22

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

这是一个演示

2020-07-22