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扩展它都有其缺点：您无法同时控制两个-您想通过包装扩展的“基本”组件，也无法控制使用“包装”组件的代码。

制造一个能够确保“我支持...所支持的一切”的组件，使得用具有更多有限道具的自定义组件替换某些通用组件是不可能的（或确实有风险）。只是因为您不知道调用包装器组件时，props客户端代码已经依赖什么。

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

另一方面，上市道具明确允许您缩小包装器组件的承诺。因此，每一个额外的prop客户代码使用它都需要自己承担风险。

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

2 个答案: