如果我有这个结构：
const MyComponent = (props) => {
return (
<Wrapper />{props.children}</Wrapper>
);
}
我像这样使用它：
<MyComponent>
<SomeInnerComponent />
</MyComponent>
如何从函数内检查是否<SomeInnerComponent />已明确包含在<MyComponent></MyComponent>,之间MyComponent？
鉴于您想检查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;
}
},
只是想为类似但不同的需求提供答案，您可能有一个 HOC 包裹了几层组件，并且您想查看 HOC 是否已经包裹了一个组件。我想出的方法是让 HOC 在组件上添加一个数据属性作为标志，然后 HOC 可以检查后续运行。
const WithFoo = Component = props => {
return props["data-with-foo"]
? <Component {...props} />
: (
<FooWrapper>
<Component {...props} data-with-foo />
</FooWrapper>
);
};