Question

如果我有这种结构：

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

我这样用它：

<MyComponent>
    <SomeInnerComponent />
</MyComponent>

如何在<SomeInnerComponent />函数中检查<MyComponent></MyComponent>之间是否明确包含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;
    }
  },

Answer 2

仅想为类似但不同的需求提供答案，您可能有一个HOC封装了几层组件，并且您想查看HOC是否已经封装了组件。我想出的方法是让HOC在组件上添加一个数据属性作为标志，然后HOC可以在以后的运行中对其进行检查。

const WithFoo = Component = props => {
  return props["data-with-foo"]
    ? <Component {...props} />
    : (
      <FooWrapper>
        <Component {...props} data-with-foo />
      </FooWrapper>
    );
};

React - 如何确定特定的子组件是否存在？

2 个答案: