React中父组件点击按钮如何强制子组件重置文本至父传值（不迁移子状态）

方案1：利用React的key属性重置组件 #

这是最简洁的官方推荐方式，当父组件需要让子组件恢复初始状态时，修改子组件的key值，React会判定这是一个全新的组件实例，重新挂载子组件后自然会使用父组件传入的最新初始文本。

父组件代码示例： #

function Parent() {
  const [parentString, setParentString] = React.useState('初始文本');
  // 用于触发子组件重置的key标识
  const [resetKey, setResetKey] = React.useState(0);

  const handleReset = () => {
    // 更新key值，触发子组件重新挂载
    setResetKey(prev => prev + 1);
  };

  return (
    <div>
      <button onClick={handleReset}>重置子组件文本</button>
      {/* 传入动态key，每次重置时更新 */}
      <DisplayText key={resetKey} initialString={parentString} />
    </div>
  );
}

子组件DisplayText代码： #

function DisplayText({ initialString }: { initialString: string }) {
  const [myString, setMyString] = React.useState(initialString);

  // 保留原有逻辑：父组件初始文本变化时同步子组件状态
  React.useEffect(() => {
    setMyString(initialString);
  }, [initialString]);

  return (
    <textarea
      value={myString}
      onChange={(e) => setMyString(e.target.value)}
    />
  );
}

该方案完全契合React组件生命周期设计，无需额外状态同步逻辑，代码简洁易维护。

方案2：通过自定义prop触发子组件重置 #

如果不想重新挂载组件（比如需要保留子组件的滚动位置等状态），可以给子组件新增一个重置触发prop，父组件点击按钮时切换该prop状态，子组件监听后执行重置。

父组件代码示例： #

function Parent() {
  const [parentString, setParentString] = React.useState('初始文本');
  const [shouldReset, setShouldReset] = React.useState(false);

  const handleReset = () => {
    // 触发重置信号，随后立即还原状态避免重复触发
    setShouldReset(true);
    setTimeout(() => setShouldReset(false), 0);
  };

  return (
    <div>
      <button onClick={handleReset}>重置子组件文本</button>
      <DisplayText 
        initialString={parentString} 
        shouldReset={shouldReset} 
      />
    </div>
  );
}

子组件DisplayText代码： #

function DisplayText({ initialString, shouldReset }: { initialString: string; shouldReset: boolean }) {
  const [myString, setMyString] = React.useState(initialString);

  // 父组件初始文本变化时同步状态
  React.useEffect(() => {
    setMyString(initialString);
  }, [initialString]);

  // 监听重置信号，执行状态重置
  React.useEffect(() => {
    if (shouldReset) {
      setMyString(initialString);
    }
  }, [shouldReset, initialString]);

  return (
    <textarea
      value={myString}
      onChange={(e) => setMyString(e.target.value)}
    />
  );
}

该方案仅更新子组件内部状态，不会触发组件挂载/卸载，适合需要保留组件额外状态的场景。

不推荐强制父组件重渲染的原因 #

修改假状态强制父组件重渲染的方式属于hack手段，会导致父组件及所有子组件无差别重渲染，带来不必要的性能开销，且代码可读性差、维护成本高，不建议使用。

内容的提问来源于stack exchange，提问作者sir-haver