时间戳

首页 > 解决方案 > reactjs中如何在父组件中重新渲染子组件？

reactjs - reactjs中如何在父组件中重新渲染子组件？

问题描述

我有一个激活组件，它调用 api 将代码发送到用户的手机，在这种情况下，我有一个计时器，我想在单击重新发送短信的按钮后重新渲染计时器组件，但我不能，我想在之后重新渲染组件单击重新发送代码按钮时

<div>
    <label className={myClasses.DRT_Label}>
        Please wait 
        <span style={{margin : '0 5px' , fontSize : '15px'}}>
            <CountDown seconds={60} />
        </span>
        seconds .
    </label>
</div>
<div className={classes.button}>
    <ButtonTemp
        type="span"
        mode="success"
        styles={{ width: '120px' }}
        invertcolor
        class="marginLeft"
        disabled={disable}
        onclick={(e) => resendSmsHandler(e)}
    >
        Resend code
    </ButtonTemp>
    <ButtonTemp
        type="span"
        mode="success"
        styles={{ width: '120px' }}
        disabled={!canClick}
        onclick={(e) => loginClickHandler(e)}
    >
            Login
    </ButtonTemp>
</div>

标签： reactjs

解决方案

我认为你需要保持你seconds的状态，

const [seconds, setSeconds] = useState(60)

并从状态传递值，

<CountDown seconds={seconds} />

现在，每当您想重新渲染计时器时，您只需将您的状态重置seconds为其初始值，您的子组件就会重新渲染。

const resendSmsHandler = () => {
   setSeconds(60)
}

推荐阅读