React 包装器组件 (HOC) 在 props 更改时不会重新渲染子组件

Question

我的包装器组件有这个签名

const withReplacement = <P extends object>(Component: React.ComponentType<P>) =>
(props: P & WithReplacementProps) => {...}

顺便说一句，完整的例子在这里https://codepen.io/xitroff/pen/BaKQNed

它从论点组件的道具中获取原始内容

interface WithReplacementProps {
getContent(): string;
}

然后点击按钮调用CCD_ 1函数。

const { getContent, ...rest } = props;
const [ content, setContent ] = useState(getContent());

我预计内容将在任何地方被替换(下面的第一节和第二节(。这是渲染函数的一部分

return (
<>
<div>
<h4>content from child</h4>
<Component
content={content}
ReplaceButton={ReplaceButton}
{...rest as P}
/>
<hr/>
</div>
<div>
<h4>content from wrapper</h4>
<Hello
content={content}
ReplaceButton={ReplaceButton}
/>
<hr/>
</div>
</>
);

Hello组件是简单的

<div>
<p>{content}</p>
<div>
{ReplaceButton}
</div>
</div>

这就是包装的制作方法

const HelloWithReplacement = withReplacement(Hello);

但问题是，内容只在第二部分被替换。1号保持原样。

在主应用程序组件中，我还替换了加载后20秒的内容。

const [ content, setContent ] = useState( 'original content');
useEffect(() => {
setTimeout(() => {
setContent('...too late! replaced from main component');
}, 10000);
}, []);

当我调用像这样的包装组件时

return (
<div className="App">
<HelloWithReplacement
content={content}
getContent={() => content}
/>
</div>
);

它也有问题——第一部分正在更新，第二部分没有。

Answer 1

看起来您正在用应用的外部状态覆盖withReplacement内部状态

<HelloWithReplacement
content={content} // Remove this to stop overriding it
getContent={() => content}
/>

不管怎样，使用两种不同的状态看起来很奇怪，最好只在一个地方管理你的应用程序状态