javascript - 如何更改 react 元素树中叶节点的属性

Question

假设我有一个像这样的元素树:

<Form>
  <FormItem>
     <Input></Input>
  </FormItem>
  <Input></Input>
  <MyInput></MyInput>
</Form>

我想禁用所有 Input 和 MyInput 组件。

我不想向所有这些输入组件添加 {disabled: true} ，而是想自动遍历并添加禁用属性。因此，当我删除或添加 Input 组件时，我不应该关心 disabled 属性。

Answer 1

<小时/>

所提供的答案都不是OP正在寻找的答案，这一点在这里很清楚:

I want to traverse and add disabled prop automatically

要遍历 React 组件的子组件，请查看 this.props.children和 React.Children helper 。您也许可以创建一个容器组件，以递归方式迭代其子节点，修改叶节点(没有子节点的节点)以添加 disabled 属性。

例如，请查看 https://mxstbr.blog/2017/02/react-children-deepdive/#manipulating-children .