Question

我正在使用 React + Typescript 实现一个个人称为 forward 的架构。它所做的只是将收到的所有道具传递给它的孩子。

但是，我想只允许与其子女兼容的道具，而不是任何财产。例如，如果有<input>个孩子，我想只允许<input>个属性。

看我的尝试：

type ForwardProps<P> = Partial<P> & {
    children?: React.ReactElement<P>;
}

export function Forward<P> ({ children, ...props }: ForwardProps<P>) {
    const mapped = React.Children.map(children, child => {
        if (React.isValidElement<P>(child)) {
            return React.cloneElement<P>(child, props);
        }

        return child;
    });

    return <>{ mapped }</>;
}

<Forward className="good-input">
    <input />
    <input />
    <input />
</Forward>

当我尝试获取...props时，Typescript说“Rest类型只能从对象类型创建”。

我该如何解决这个问题？

Answer 1

我不是百分之百确定你想要的东西只允许组件占用的道具，但关于打字稿错误你可以添加道具作为可选的任何属性，如：

type ForwardProps<P> = Partial<P> & {
    children?: React.ReactElement<P>;
    props?: any
}

export function Forward<P> ({ children, props }: ForwardProps<P>) {
    const mapped = React.Children.map(children, child => {
        if (React.isValidElement<P>(child)) {
            return React.cloneElement<P>(child, props);
        }

        return child;
    });

    return <>{ mapped }</>;
}

<Forward className="good-input">
    <input />
    <input />
    <input />
</Forward>

如何将其子女接受的父道具传递给父母？

1 个答案: