我有一个父组件，它持有一个字符串作为状态。这个字符串是在其他子组件的帮助下组成的。
然后父组件将这个字符串发送给DisplayText组件来显示它。然而在DisplayText组件中有一个字符串的内部状态，因此用户可以随心所欲地改变它，结果
const [myString, setMyString] = React.useState<string>('');
React.useEffect(() => {
// do some stuff with the string and save it
setMyString(string);
}, [...]);
<Textarea
value={myString}
onChange={(value) => setMyString(value)}
/>
(这只是基本的React。)我想在父组件中添加一个按钮，强制子组件覆盖用户所做的任何更改，并重新呈现来自父组件的文本。当父控件中的状态发生变化时，这种情况自然会发生，但是当单击父控件中的按钮时，如何模拟相同的效果呢?
我可以通过将编辑文本的内部状态从子元素移动到父元素来解决这个问题，所以点击按钮可以控制它，但是有没有另一种不这样做的方法?因为编辑的文本不应该涉及父节点。我想到的第二个解决方案是强制重新渲染父元素，但这样做的方法很粗糙(改变虚拟状态)。有简单的解决办法吗?
在多个子组件中组合字符串对我来说似乎是一种糟糕的方法。但是如果你真的需要或者想要那样做，那么在父组件中添加一个覆盖myString的按钮应该可以工作。引用此值的道具将自动更新。只要去掉孩子们的内部状态，就有了一个"单一的真理来源"。
我觉得这是个坏习惯。
你应该:
- 将状态提升到parent，并保存一个默认值。点击按钮应该会重置为默认值。
- 如果你需要改变一个或多个子进程的父进程状态，你应该传递一个setter函数来设置父进程的状态。