按钮点击添加的SqlEditor组件如何批量更新disabled状态？

你现在的问题是因为直接把<SqlEditor>组件实例存在了sqlEditorList里，这些实例的disabled值是添加时的固定快照，后续disabled状态变化时，老组件不会自动更新。要让所有组件同步状态，这么改就行：

• 别存JSX，存配置数据
  把sqlEditorList改成存储每个编辑器的标识信息（比如唯一ID、标题），而不是直接存组件实例。代码示例：

  // 初始化状态
  const [sqlEditorList, setSqlEditorList] = useState([]);
  
  // 添加编辑器时存入配置项
  const addSqlEditor = () => {
      setSqlEditorList(v => [...v, { id: Date.now(), title: "A" }]);
  };
  

• 渲染时动态生成组件
  遍历配置列表，每次渲染都生成新的<SqlEditor>，并传入当前最新的disabled状态：

  <div>
      {sqlEditorList.map(item => (
          <SqlEditor 
              key={item.id}
              style={{width: "100%"}} 
              title={item.title}
              disabled={disabled}
          />
      ))}
  </div>
  

这样当你调用setDisabled(true)时，组件会重新渲染，所有<SqlEditor>都会拿到最新的disabled值，老组件的状态也就同步更新了。

如果你的组件层级比较复杂，也可以把disabled放到React Context里，让所有SqlEditor从上下文取状态，但上面的方法在大多数简单场景下足够直接好用。

内容的提问来源于stack exchange，提问作者Louis Liang