React - 如何確定特定的子組件是否存在？

Question

如果我有這樣的結構：

const MyComponent = (props) => { 
    return (
     <Wrapper />{props.children}</Wrapper> 
    ); 
} 

，我使用它是這樣的：

<MyComponent> 
    <SomeInnerComponent /> 
</MyComponent> 

我如何檢查，看看<MyComponent></MyComponent>之間是否<SomeInnerComponent />已明確被列入，從MyComponent函數內？

Answer 1

既然你要檢查SomeInnerComponent存在作爲一個孩子或沒有，你可以做以下

const MyComponent = (props) => { 
    for (let child in props.children){ 
     if (props.children[child].type.displayName === 'SomeInnerComponent'){ 
      console.log("SomeInnerComponent is present as a child"); 
     } 
    } 
    return (
     <Wrapper />{props.children}</Wrapper> 
    ); 
} 

或者你可以有你的組件上的propTypes驗證

MyComponent.propTypes: { 
    children: function (props, propName, componentName) { 
     var error; 
     var childProp = props[propName]; 
     var flag = false; 

     React.Children.forEach(childProp, function (child) { 
     if (child.type.displayName === 'SomeInnerComponent') { 
      flag = true 
     } 
     }); 
     if(flag === false) { 
      error = new Error(componentName + ' does not exist!' 
     ); 
     } 
     return error; 
    } 
    },