在这里,我将click事件绑定到了子组件,以使父组件重新呈现。根据官方解决方案,无法在功能组件中使用forUpdate()方法,但折衷方案是使用setState重新呈现。但是,单击时父组件不会重新呈现。在功能组件中,子组件使用什么方法重新渲染父组件?
这是子组件代码:
export default function Refresh({ refresh }: Props) {
return (
<RefreshContainer>
<RefreshContent onClick={ refresh }>
<RefreshIcon color={ '#4F7DAF' } className={ 'icon-refresh' } size={ '16px' } marginRight={ '4px' }/>
<RefreshSpan color={ '#4F7DAF' } text={ '点击刷新' } marginRight={ '4px' } />
<RefreshSpan color={ '#999999' } text={ '换一批内容' } />
</RefreshContent>
</RefreshContainer>
)
}
这是父组件代码:
export default () => {
const [ refresh, setRefresh ] = useState<boolean>(false)
const update = useCallback(() => {
// test
document.querySelector('.found-scroll-container')!.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
})
setRefresh(refresh => !refresh)
}, [])
return (
<div className={ 'found-scroll-container' }>
<div className={ 'found-scroll-content' }>
<div className={ 'container-padding' }>
<Carousel type={ '2' }/>
<Type />
</div>
<div className={ 'recommend-container-padding' }>
<Recommend quantity={ '6' }/>
<RecommendNewMusic />
<HotWindVane />
<Radio/>
</div>
<Refresh refresh={ update } />
</div>
</div>
)
}
单击RefreshContainer后,重新渲染父组件,其效果应与window.reload()方法相同。你是怎样做的?非常感谢你!