Reactjs 如何重新提交功能组件？

在这里，我将单击事件绑定到子组件，以使父组件重新渲染。根据官方的解决方案，没有办法在函数组件中使用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>
    )
}

导出默认函数刷新（{Refresh}:Props）{
返回(
)
}

以下是父组件代码：

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

导出默认值（）=>{
const[refresh，setRefresh]=useState（false）
const update=useCallback（（）=>{
//试验
document.querySelector（'.found scroll container'）！.scrollTo({
排名：0，
左:0,，
行为：“平滑”
})
setRefresh（刷新=>！刷新）
}, [])
返回(
)
}

---

单击RefreshContainer后，让父组件重新渲染，效果应与window.reload（）方法相同。你是怎么做到的？多谢各位

问题是

上的

onClick

事件不会触发，因为

onClick

是一个DOM事件，但是

RefreshContent

只是一个react组件，因此对于

RefreshContent

，

onClick

将作为react props传递

您应该在

RefreshContent

中将

onClick

附加到本机DOM元素中

例如

将事件附加到DOM元素

const RefreshContent=props=>(
{props.children}
);

这将导致触发

onClick

事件，并更新父组件中的状态

---

谢谢你的回答！RefreshContent打包在样式化组件中，可以触发单击事件，单击也可以更改状态

const RefreshContent = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
    text-align: center
`

---

这回答了你的问题吗？单击即可更改状态，但无法重新提交父组件！我已经用滚动示例更新了代码沙盒，就像在代码中一样。如果您提到可以更改状态并执行回调。然后你的滚动条应该到顶部。你面临什么问题？它是否没有执行回调？或者组件在状态更改时未重新呈现？