React.js 如何从父组件更新动态子组件的properties/props/state？

问题 #

我目前正在学习React，尝试开发自有工具包的过程中遇到了如下问题：
我有一个用于控制子组件的Parent组件，但这些子组件并非显式定义，仅可通过props.children访问。
以下是可说明我场景的简单示例，作为Parent子元素的Child组件数量并不固定：

function Parent(props) {
  functionCalledEverySecond() {
    for (let child of props.children) {
      // Increment width by 1 like:
      // child.props.width  += 1
    }
  }

  return <div>{props.children}</div>;
}

function Child(props) {
  return <div style={{ width: props.width }}></div>;
}

请问我应当如何实现该需求？

答案 #

React遵循单向数据流规则，所有组件的props都是只读属性，你无法直接修改props.children挂载的props来驱动子组件更新。你可以根据你的场景选择以下两种方案实现：

方案1：状态驱动 + React.cloneElement 注入props（最适配你的场景）

这种方案不需要修改子组件代码，只需要在Parent组件内维护状态，渲染时给子组件注入动态计算的props即可：

import { useState, useEffect } from 'react';

function Parent(props) {
  // 维护每秒自增的宽度增量状态
  const [widthIncrement, setWidthIncrement] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setWidthIncrement(prev => prev + 1);
    }, 1000);
    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      {/* 用React.Children.map处理children，自动兼容单/多子元素场景 */}
      {React.Children.map(props.children, (child) => {
        // 可选校验：仅给Child组件注入props，避免污染其他子元素
        if (React.isValidElement(child) && child.type === Child) {
          return React.cloneElement(child, {
            // 子组件原有width基础上叠加增量
            width: (child.props.width || 0) + widthIncrement
          });
        }
        return child;
      })}
    </div>
  );
}

// Child组件不需要做任何修改
function Child(props) {
  return <div style={{ width: props.width, height: '20px', background: '#eee', margin: '8px 0' }}></div>;
}

适用场景：子组件都是Parent的直接子节点，仅需要注入少量动态属性。

方案2：Context 跨层级传递状态

如果你的子组件嵌套在其他元素内部，或者需要传递多个动态参数，可以用Context实现，不需要逐层传递props：

import { useState, useEffect, createContext, useContext } from 'react';

// 创建宽度增量Context
const WidthIncrementContext = createContext(0);

function Parent(props) {
  const [widthIncrement, setWidthIncrement] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setWidthIncrement(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <WidthIncrementContext.Provider value={widthIncrement}>
      <div>{props.children}</div>
    </WidthIncrementContext.Provider>
  );
}

// 子组件消费Context获取增量
function Child(props) {
  const increment = useContext(WidthIncrementContext);
  return <div style={{ width: (props.initialWidth || 0) + increment, height: '20px', background: '#eee', margin: '8px 0' }}></div>;
}

适用场景：子组件层级深、需要跨多层传递状态的场景，缺点是需要子组件配合消费Context。

注意事项 #

• 不要尝试直接修改props.children的属性，所有状态变更必须通过React状态更新触发，才能正常驱动组件重渲染。
• 优先用React.Children提供的工具方法处理props.children，它会自动处理props.children为非数组（比如单个子元素）的边界场景。

内容的提问来源于stack exchange，提问作者Adonis Stavridis