在返回函数中经过一些延迟后显示组件答案

【问题标题】：Show a component after some delay inside return function在返回函数中经过一些延迟后显示组件
【发布时间】：2018-01-25 07:27:35
【问题描述】：

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

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}/>

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

谁能帮我解决这个问题？

【问题讨论】：

标签： javascript reactjs return settimeout

【解决方案1】：

您可以做的是在状态中设置一个标志，指示是显示还是取消显示 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;

}

按照你的方式是不可能的

【讨论】：

【解决方案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 包装起来。

【讨论】：

遇到任何问题？

【解决方案3】：

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

这就是为什么它不起作用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;

}

【讨论】：