React : React 구성 요소에만 소품을 추가하고 (React.Children.map 재귀 적으로)

Question

의 구성 요소를 여러 개 관리하고 일부 소품을 부착하는 React 구성 요소가 있습니다. 는 지금까지,이

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

처럼 단순한 양식을 작성하지만 지금, 나는이에 Field에 소품을 추가 간단한 양식은이

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

같은 더 복잡한 구조의 형태가 필요합니다 방법

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

편집 , 문제는 반복적으로 DOM 트리를 걸어에 대한 자세한입니다 -

간단한 추상화 된 버전은 같은 것 이 질문의 단순한 사본 : React.Children.map recursively?