React：Reactコンポーネントのみに小道具を追加する（React.Children.map再帰的に）

Question

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

ように私はこれでFieldに小道具を追加しました道

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

}); 

私だけ Fieldのコンポーネントにいくつかの小道具を追加する Formを変更するにはどうすればよい

なく htmlタグ？など「スパン」、「DIV」、

として文字列を

Answer 1

それぞれの子コンポーネントは、typeフィールドを持つ必要があり、通常のHTML要素のために、このようになりますことができ、単にswitch（またはお好みの条件）その分野に対する

codepenで

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

：コメントに基づいて

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

EDIT 、質問は再帰的にDOMツリーを歩くの詳細がある -

シンプルな抽象化されたバージョンは次のようになりますこの質問の重複した単純なもの：React.Children.map recursively?