我有一个React组件,其中有许多子组件。我不希望立即渲染子组件,而是要经过一段时间的延迟(对于每个子组件而言,它们是统一的还是不同的)。
我想知道-有没有办法做到这一点?
我认为最直观的方法是给孩子一个“ wait” prop,在从父代传递过来的持续时间内隐藏该组件。通过将默认状态设置为隐藏,React仍会立即渲染组件,但是直到状态更改后它才可见。然后,您可以设置componentWillMount为调用一个函数,以在通过道具传递的持续时间之后显示它。
prop
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> ) } });
这是一个演示