javascript - 在返回函数内延迟一段时间后显示组件

Question

我试图在延迟一段时间后渲染一个新组件。我的方法是这样的

if (success) {
    return
    <span className="small_font white_color border padding_5px horiz_center"
        style={{ marginTop: '-5px' }}>Amount changed</span>
    setTimeout(<Retransfer reqUserId={reqUserId} changeAccountLevel={changeAccountLevel} />, 2000);
} else {
    return addFriend;
}

所以在 if 语句中我试图显示

<span className="small_font white_color border padding_5px horiz_center"
                      style={{marginTop: '-5px'}}>Amount changed</span>

首先部分，延迟一段时间后显示

<Retransfer reqUserId={reqUserId} changeAccountLevel={changeAccountLevel}/>

这个组件。但我的方法似乎不起作用。

谁能帮我解决这个问题吗？

Answer 1

您可以做的是在状态中有一个标志来指示是否显示或取消显示重新传输组件。像这样

state = {
    isVisibleRetransfer: false,
}
componentDidMount() {
    setTimeout(() => {
        this.setState({
            isVisibleRetransfer: true
        })
    }, 2000)
}

在你的渲染中

if (success) {
    return
    <span className="small_font white_color border padding_5px horiz_center"
        style={{ marginTop: '-5px' }}>Amount changed</span>

    { this.state.isVisibleRetransfer && <Retransfer reqUserId={reqUserId} changeAccountLevel={changeAccountLevel} /> }
} else {
    return addFriend;

}

按照你的方式是不可能的