React：检测 children prop 是 JSX 还是返回 JSX 的 function

Question

我想制作一个可以具有 JSX 或 function 的组件，该组件将 JSX 作为子组件返回。 当我为typeof或 JSX 记录children道具的类型时，它都是object 。 如何检测children道具是 function 还是 JSX？

这是我到目前为止所拥有的

type Props = {
    children: ReactNode | ((close: () => void) => ReactNode);
};

const Comp = ({ children }: Props) => (
    {typeof children === 'function' ? children() : children}
)

Answer 1

你的条件很好，你只需要包裹在div中。 当 JSX 被转译时，它将是object的类型

 const Comp = ({ children }: any) => { console.log('***', typeof children); return <div>{typeof children === 'function'? children(): children}</div>; }; const Element = () => { return <div> <Comp>{() => <div>Hello</div>}</Comp> <Comp><div>Foo</div></Comp> </div> } const domContainer = document.querySelector('#app'); ReactDOM.render(<Element/>, domContainer);

 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <div id="app"> </div>