指定道具是特定組件在陣營

Question

我正在寫的成分，我wan't道具中的一個永久被阿spesific部件

class Component extends React.Component { 
    static propTypes: { 
     children: /*Only ChildComponents allowed*/ 
    } 
} 

class ChildComponent extends React.Component {} 

<Component><div /></Component> // Should fail 
<Component><div /><ChildComponent></Component> // Should fail 
<Component><ChildComponent /></Component> // Should Succedd 
<Component><ChildComponent /><ChildComponent /></Component> // Should Succedd 

Answer 1

children: React.PropTypes.instanceOf(ChildComponent) 

的實例看這裏 - https://facebook.github.io/react/docs/reusable-components.html。

更新 由於這種順序是在你的情況下工作，試試這個另一種方法 -

在propTypes，允許任何節點 -

children: React.PropTypes.node 

然後在render方法 -

React.Children.map(children, (child, index) => { 
    if (!React.isValidElement(child) 
     || !child.type 
     || child.type.displayName !== 'ChildComponent'){ 
    // Exterminate! Exterminate! 
    } 
}