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