Javascript 省略HOC中的道具

有一个关于在HoC中省略道具的异常问题

我有以下几点：

接口IMyComponentProps{
prop1:字符串，
建议2：功能，
items1:字符串[]，
items2:字符串[]，
}

我有一个HOC，它接受这个组件并将items1和items2传递给它

接口IWithItems{
items1:字符串[]，
items2:字符串[]，
}
键入WithoutItems=省略；
功能HoC(
WrappedComponent：
React.component类
|React.function组件，
)：React.ComponentClass{
使用ItemsRapper扩展React.Component初始化{
状态={
项目1:[]，
项目2:[]，
};
异步组件didmount（）{
const items1=wait this.getItems1（）；
const items2=wait this.getItems2（）；
这是我的国家({
项目1，
项目2，
});
}
getItems1=（）=>(
//从后端
);
getItems2=（）=>(
//从后端
);
render（）{
返回(
);
}
}
回程提升机非静态（带项目振打器、包装组件）；
}

包装组件有自己的道具，这些道具包含items1、items2。 从后端提取项目并将其传递给包装组件

let ResultingComponent = HoC(MyComponent);

在我的

index.ts

文件中，我将其导出为

导出默认HoC（MyComponent）；

我们的想法是，在导出和导入其他文件

MyComponent

后，应该需要prop1和prop2，但不需要items1和items2，因为它们已经传入HoC

但现在它说

Error:(59, 12) TS2322: Type 'Readonly<Pick<T, Exclude<keyof T, "items1" | "items2">>> & { items1: never[]; items2: never[]; children?: ReactNode; }' is not assignable to type 'IntrinsicAttributes & T & { children?: ReactNode; }'.
  Type 'Readonly<Pick<T, Exclude<keyof T, "items1" | "items2">>> & { items1: never[]; items2: never[]; children?: ReactNode; }' is not assignable to type 'T'.

错误：（59,12）TS2322:Type'Readonly&{items1:never[]；items2:never[]；children？：ReactNode；}'不可分配给Type'intrinsicatAttribute&T&{children？：ReactNode；}'。
类型“Readonly&{items1:never[]；items2:never[]；children？：ReactNode；}”不可分配给类型“T”。

---

可能吗？如果可能的话-我做错了什么？

你做了相反的事情

HoC

接受带有

items1

和

items2

的组件，并返回不带

items1

和

items2的HoC。组件也是如此

let ResultingComponent = HoC(MyComponent);

您应该只提供
prop1
和
prop2
<代码>项目1

和

项目2

将从HoC中填写

如果您希望传递不带

items1

和

items2

的组件，但结果组件包含

items1

和

items2

，您应该这样做

function HoC<T>(
    WrappedComponent:
        React.ComponentClass<T>
        | React.FunctionComponent<T>,
): React.ComponentClass<T & IWithItems> {
    class WithItemsWrapper extends React.Component<T & IWithItems, IWithItems> {

        render() {
            return (
                <>
                // Do some rendering based on this.props.items1 and this.props.items2
                    <div>{this.props.items1.map(e => (<div>{e}</div>))}</div>
                    <WrappedComponent
                        {...this.props}
                    />
                </>
            );
        }
    }

    return hoistNonReactStatics(WithItemsWrapper, WrappedComponent);
}

函数HoC(
WrappedComponent：
React.component类
|React.function组件，
)：React.ComponentClass{
使用ItemsRapper扩展React.Component初始化{
render（）{
返回(
//基于this.props.items1和this.props.items2执行一些渲染
{this.props.items1.map（e=>（{e}））}
);
}
}
回程提升机非静态（带项目振打器、包装组件）；
}

---

但请注意，在这种情况下，应将

item1

和

item2

提供给HoC生成的组件。在HoC内部，您不应该从后端接收这些道具，但您应该基于这些道具呈现一些东西，不要将它们传递给

WrappedComponent

我想我找到了解决方案

首先，简化WithoutItems并更改HOC定义

类型省略=拾取；
类型Diff=省略；
不带项目的类型=差异；
功能HoC
(
WrappedComponent：
React.ComponentClass

|React.FunctionComponent
，
)：React.ComponentClass{
使用ItemsRapper扩展React.Component初始化{

下一步是让道具显式映射到类型p

//HoC呈现方法
render（）{
返回(
);
}

其他一切都保持原样

---

---

解决方案成立

感谢您的回答，但我认为这并不是我想要的。组件应该根据其接口期待items1和items2。但我正在尝试将从后端获取数据分离到HOC，以简化组件测试。我的想法是可以导入组件并从任何地方传递这两个道具，但如果我不想这样做，我可以导入这个HOC包装的组件，让它自己工作。目标道具项目1和项目2应该存在于组件上，但当它被HOC包装时，它们不应该存在，因为它们是从HOC传递过来的。也许我的想法不好？