是否可能与JSDOC儿童或用作功能的渲染道具进行文档

Question

我正在尝试使用React渲染模式创建包装器组件，但我也想记录通过渲染/儿童传递的参数，以便例如有用Intellisense。

我试图将自己的组件定义为React.ExoticComponent<React.ConsumerProps<MYTYPE>>，但是这样做意味着像<Context.Consumer>一样声明组件，隐藏输入道具。

const Wrapper = ({children}) => {
    const exampleFunction = () => {} 
    return (
        <div>
            {children({exampleFunction})}
        </div>
    )
}
const ImplementationComponent = () => {
    const exampleFunction = () => {} 
    return (
        <Wrapper>
            {({exampleFunction}) => (
                // <Components...>
            )}
        </Wrapper>
    )
}

我希望实施中的类型检查，以帮助谁使用包装器组件。

Answer 1

/** @param {{ children: JSX.Element}} [Props] */
const Wrapper = ({children}) => {...}

Answer 2

如果要支持string，null，Nothing(空(等。使用React.ReactNode并使其可选：

/**
 * @param {Object} props
 * @param {React.ReactNode} [props.children]
 * @returns {JSX.Element}
 */
function Wrapper ({children}) {
  // ...
})

因为：

type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;

但是：

namespace JSX {
    interface Element extends React.ReactElement<any, any> { }
    ...

请参阅：https：//github.com/definitelytyped/definitelytyped/blob/master/master/types/react/index.d.t.ts