Question

在这里，我已将click事件绑定到子组件，以使父组件重新呈现。根据官方解决方案，无法在功能组件中使用forUpdate（）方法，但折衷方案是使用setState重新呈现。但是，单击时父组件不会重新呈现。在功能组件中，子组件使用什么方法重新呈现父组件？

这是子组件代码：

std::string s(length, '\0');
std::cin.get(s.data(), s.size());

这是父组件代码：

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

单击RefreshContainer后，重新渲染父组件，其效果应与window.reload（）方法相同。你是怎样做的？非常感谢！

Answer 1

问题是您的onClick上的<RefreshContent onClick={ refresh }>事件不会触发，因为onClick是DOM事件，而RefreshContent只是一个反应组件，因此对于{{1 }}，RefreshContent将作为React道具传递。

您应该做的是在onClick中将RefreshContent附加到本地DOM元素。

例如

将事件附加到DOM元素

onClick

这将触发const RefreshContent = props => ( <div onClick={props.onClick}>{props.children}</div> );事件，并且您在“父级”组件中的状态也会更新。

https://codesandbox.io/s/infallible-roentgen-7nczb?file=/src/components/Refresh.jsx:606-696

Answer 2

@ m5khan谢谢您的回答！ RefreshContent打包为样式-组件，可以触发单击事件，并且通过单击也可以更改状态！

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

如何重新渲染功能组件？

2 个答案: