React：仅将道具添加到 React 组件而不是 html 标签（React.Children.map 递归）

Question

I have a Form 's React component that manage several Field 's component and attach to them some props. Until now, I created only simple form, like this

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

but now, I need a form with more complex structure, like this

<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>

With simple form I added props to Field in this way

var Form = React.createClass({

    render: function(){
        <form onSubmit={this.submit} acceptCharset="UTF-8" ref={cForm.id}>
            {
                React.Children.map(this.props.children, child => {

                    // if type is funtion the is a react component
                    if( typeof child.type === "function"){

                        return  React.cloneElement(child, {
                            attachToForm: this.attachToForm,
                            disabled: this.props.disabled
                        });

                     } else {

                         return child;
                     }

               })

            }
        </form>
    }

});

How can I modify Form to add some props only to Field 's component and not html tag?

Answer 1

Each child component should have a type field, for normal html elements, this would be a string such as "span", "div", etc.

You can simply switch (or your conditional of choice) against that field.

Simple abstracted version would be like:

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')
);

With codepen:

http://codepen.io/cjke/pen/qRQvmY?editors=0010

EDIT Based on the comments, the question is more about recursively walking the DOM tree - in which, its simple a duplicate of this question: React.Children.map recursively?