Javascript React：仅为React组件而不是html标记添加道具（React.Children.map递归）

我有一个

表单

的React组件，它管理几个

字段

的组件，并将一些道具附加到这些组件上。 直到现在，我只创建了简单的表单，如下所示

<Form>
    <FieldText/>
    <FieldDropdown />
</Form>

<Form>
    <div>
        <a data-tab="first">First Tab</a>
        <a data-tab="second">Second Tab</a>
    </div>

    <div data-tab="first">
        <FieldText />
    </div>

    <div data-tab="second">
        <FieldText />
    </div>
</Form>

我如何修改

表单

以仅将一些道具添加到

字段

的组件中而不添加

---

html标记？

每个子组件都应该有一个

类型

字段，对于普通html元素，这将是一个字符串，如“span”、“div”等

您只需对该字段切换（或您选择的条件）

简单的抽象版本如下：

const Foo = (props) => (
  <div style={props.style}>FOO</div>
);

class App extends React.Component {
  render () {           
    return (
      <div>
        { React.Children.map(this.props.children, child => {

          if(typeof child.type === 'string') {
              switch(child.type) {
                case 'span':
                  return React.cloneElement(child, { style: { background: 'pink' }});
                case 'div':
                  return React.cloneElement(child, { style: { background: 'red' }});
              }
          } else {
              switch(child.type.name) {
                case 'Foo':
                  return React.cloneElement(child, { style: { background: 'blue' }});
              }
          }
          return child;
        })}
      </div>
    );
  }
}

ReactDOM.render(
  <App>
    <span>span</span>
    <p>p</p>
    <Foo />
    <div>div</div>
  </App>,
  document.getElementById('root')
);

constfoo=（道具）=>(
福
);
类应用程序扩展了React.Component{
呈现（）{
返回(
{React.Children.map（this.props.Children，child=>{
if（typeof child.type=='string'）{
开关（子类型）{
案例“span”：
返回React.cloneElement（子级，{style:{background:'pink'}}）；
案件‘div’：
返回React.cloneElement（子级，{style:{background:'red'}}）；
}
}否则{
开关（child.type.name）{
案例“Foo”：
返回React.cloneElement（子级，{style:{background:'blue'}）；
}
}
返回儿童；
})}
);
}
}
ReactDOM.render(

编辑
根据这些评论，这个问题更多的是关于递归遍历DOM树的——在这个问题中，它很简单，是这个问题的重复：
我知道，事实上，我用“child.type”来确定child是否是一个函数。我不知道如何创建一个递归方法，在表单html标记内部添加新的道具，并只向字段添加新的道具组件（如果字段在另一个html标记中）如果“您知道”然后你需要重新考虑你问题的措辞——最后一行问我如何区分组件和html元素。它没有提到递归遍历DOM树。对不起，我的英语不好，所以我更难解释我自己。在你的例子中，如果你把“Foo”放在最后一个div中，“Foo”将我是红色而不是蓝色这是我的问题
const Foo = (props) => (
  <div style={props.style}>FOO</div>
);

class App extends React.Component {
  render () {           
    return (
      <div>
        { React.Children.map(this.props.children, child => {

          if(typeof child.type === 'string') {
              switch(child.type) {
                case 'span':
                  return React.cloneElement(child, { style: { background: 'pink' }});
                case 'div':
                  return React.cloneElement(child, { style: { background: 'red' }});
              }
          } else {
              switch(child.type.name) {
                case 'Foo':
                  return React.cloneElement(child, { style: { background: 'blue' }});
              }
          }
          return child;
        })}
      </div>
    );
  }
}

ReactDOM.render(
  <App>
    <span>span</span>
    <p>p</p>
    <Foo />
    <div>div</div>
  </App>,
  document.getElementById('root')
);