React：將道具只添加到React組件而不是html標籤（React.Children.map遞歸）

Question

我有一個Form的React組件管理多個Field的組件，並附加一些道具。 到現在爲止，我只創建簡單的表格，這樣

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

}); 

如何修改Form添加一些道具只有Field的組件，而不是 html標記？

Answer 1

每個子組件應該有一個type場，對於正常的html元素，這將是一個字符串，如「跨越」，「格」，等等。

你可以簡單地switch（或您的條件選擇）反對那個領域。

簡單抽象的版本是這樣的：

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

隨着codepen：

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

編輯 根據該意見，問題更多的是遞歸遍歷DOM樹 - 其中，其簡單的這個問題的副本：React.Children.map recursively?