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;

}

你做这件事的方式不可能

Answer 2

您尝试的方式不起作用，因为setTimeout的功能将在指定时间后调用，并且不会返回任何内容。

可能的解决方案是，使用Retransfer内的状态值并在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;
}

内部Retransfer组件：

constructor(){
    super();
    this.state = {
        isRenderComp: false,
    }
}

componentDidMount(){
    setTimeout(()=>{
        this.seState({ isRenderComp: true })
    }, 2000);
}

render(){
    if(!this.state.isRenderComp)
        return null;
    return(
        ....
    )
}

其他问题是：

1-单独退货将被视为退货; Automatic Semicolon Insertion，因此请使用()或将span放在同一行。

2-您在成功块中返回2个元素，因此请用div包装内容。

Answer 3

setTimeout有两个参数，第一个是在第二个参数传递固定时间后需要执行的函数或表达式。

这就是为什么它不起作用setTimeout

为此，您可以使用组件在修复时间后更改显示Retransfer的状态。

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;

}

在返回功能内部延迟一段时间后显示组件

3 个答案: