如何验证props是有效元素还是功能组件?

Question

我在验证props传递到CustomComponent是否是有效的react jsx时遇到了一些问题，特别是在React Native

假设我的CustomComponent是:

import React from 'react';
import {View, Text} from 'react-native';
export default CustomComponent = props => {
const RenderHeader = () => {
if (React.isValidElement(props.headerComponent))
return props.headerComponent;
else return null;
};

return (
<View style={{ flex: 1, ...props.style }}>
<RenderHeader />
</View>
);
};

我想使用我的CustomComponent像这样:

const Header = () => {
return <Text style={{ textAlign: "center" }}>What is your birthday?</Text>;
};
/** <Header/> rendered */
1. <CustomComponent headerComponent={<Header/>} />
/** <Header/> not render */
2. <CustomComponent headerComponent={()=> <Header/>} />
/** Header not render */
3. <CustomComponent headerComponent={Header} />

如何让我的CustomComponent接受以上两种语法并正确渲染?

Answer 1

try this:

const CustomComponent = props => {
const RenderHeader = () => {
return props.headerComponent instanceof Function ? props.headerComponent() : props.headerComponent
};

return (
<div style={{ flex: 1, ...props.style }}>
<RenderHeader />
</div>
);
};
const Header = () => {
return <p style={{ textAlign: "center" }}>What is your birthday?</p>;
};
const Example = () => {
return (
<div>
<CustomComponent headerComponent={<Header/>} />
<CustomComponent headerComponent={()=> <Header/>} />
<CustomComponent headerComponent={Header} />
</div>
);
};
// Render it
ReactDOM.createRoot(
document.getElementById("root")
).render(
<Example />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>