如何访问嵌入式组件的PropTypes？

Question

有像元素的组成

function ExtendedPasswordInput({ forceValidation, ...props }) {
    return <>
            <input type="password" {...props} />
            <Tooltip forceValidation={forceValidation} />
        </>;
}

ExtendPasswordInput.propTypes = {
    validation: PropTypes.bool.isRequired,
};

所以在这里，我将所有额外的道具传递到<input />里面。我想扩展propTypes以反映：

ExtendPasswordInput.propTypes = {
    value: PropTypes.string,
    onChange: PropTypes.func,
    onKeyPress: PropTypes.func,
    onClick: PropTypes.func,
    onFocus: PropTypes.func,
    onBlur: PropTypes.func,
    // ... a lot of other <input>-specific props

    validation: PropTypes.bool.isRequired,
};

我希望能用到类似的东西

ExtendPasswordInput.propTypes = {
    ...input.propTypes,
    validation: PropTypes.bool.isRequired,
};

但自从input is not defined以来，这肯定不起作用。是否可以明确导入本机组件以获取其propTypes？

到目前为止检查了包react和react-dom的命名导入没有运气。

甚至尝试过(<input />).constructor.propTypes，但它返回undefined。

我知道在TypeScript中它是可能的

interface ExtendedPasswordInputProps extends React.HTMLProps<HTMLInputElement> { }

但是如何仅使用PropTypes实现这一目标？

Answer 1

我没有测试过，但这应该可行。你在这里寻找一个元素（输入）和Tooltip实例：

ExtendedPasswordInput.propTypes = {
  children: PropTypes.arrayOf(
    PropTypes.node.isRequired,
    PropTypes.instanceOf(Tooltip)
  )
};

Answer 2

我认为没有办法实现这一目标。

而且我相信它会相当不错。

组件propTypes是一种接口，公共合同。无论如何用...someOthersPropType扩展这个有它的缺点：你无法控制两个 - 你希望通过包装扩展的“基础”组件，而且你无法控制代码使用你的“包装”组件。

制作一个确保“我支持所有......支持的东西”的组件使得用一个具有更多有限道具的自定义组件替换一些通用组件是不可能的（或者真的很冒险）。仅仅因为在调用该包装器组件时您无法知道客户端代码已经依赖的道具。

实际上任何触及嵌套组件的重构都会很痛苦。

另一方面，列出道具明确允许您缩小包装器组件的承诺。因此，每个额外的支柱客户端代码都会使用它来冒险。