Я хочу создать компонент, который может иметь JSX или функцию, которая возвращает JSX как дочерний элемент. когда я регистрирую typeof
реквизит children
для функции или JSX, это оба object
. Как определить, является ли реквизит children
функцией или JSX?
Это то, что у меня есть до сих пор
type Props = {
children: ReactNode | ((close: () => void) => ReactNode);
};
const Comp = ({ children }: Props) => (
{typeof children === 'function' ? children() : children}
)
Ваше состояние в порядке, и вам просто нужно завернуть div
. Когда JSX транспилируется, он будет типа object
const Comp = ({ children }: any) => {
console.info('***', 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>
typeof children
равноfunction
, когда вы передаете функцию в качестве дочернего элементаComp
. Ваш пример не компилируется под TS и не запускается под JS, пожалуйста, постарайтесь поделиться безошибочным кодом, где это возможно, который действительно демонстрирует вашу проблему.