Javascript 在返回函数中显示延迟后的组件

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

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（成功）{
返回
变更金额
setTimeout（，2000）；
}否则{
回报朋友；
}

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

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

变更金额

第一部分和经过一段时间的延迟后发布

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

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

---

有人能帮我吗？

您尝试的方法不起作用，因为的函数将在指定时间后被调用，并且不会返回任何内容

可能的解决方案是，在

重新传输

中使用状态值，并在2秒后呈现内容，或者您也可以在父组件中保持该状态

像这样：

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

} else {
    return addFriend;
}

其他问题包括：

1-单独退货将被视为退货，因此，要么使用

（）

，要么将

span

放在同一行中

---

2-您将在成功块中返回2个元素，因此使用

div

将内容包装起来。您可以在状态中设置一个标志，指示是否显示或取消显示重传组件。像这样

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;

}

if（成功）{
返回
变更金额
{this.state.isVisibleRetransfer&&}
}否则{
回报朋友；
}

---

您不可能以这样的方式执行它

setTimeout

接受两个参数，第一个是在第二个参数中经过固定时间后需要执行的函数或表达式

这就是它不起作用的原因

为了实现这一点，您可以让组件在固定时间后更改显示重传的状态

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;

}

if（成功）{
返回
变更金额
{this.state.isVisibleRetransfer&&}
}否则{
回报朋友；
}

是否面临任何问题？

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;

}