有一个HOC组件，用于存储所有元素作为输入，选择的一种状态的值。输出函数接受一个参数({text: Component, select: Component})。输入参数时，错误显示为
TS2322: Type '({ settings }: Param) => (type: any) => any' is not assignable to type 'FC<Param>'. Type '(type: any) => any' is missing the following properties from type 'ReactElement<any, any>': type, props, key
app.js
const useSelectComponent = CustomFabric({
text: Input, // component view
select: Select, // component view
});
function App() {
const InputField = useSelectComponent('text');
const SelectField = useSelectComponent('select');
return (
<form>
<InputField/>
<SelectField/>
</form>
);
}
在接口中，我指示对象元素将包含一个函数，第二个接口描述具有实体的对象。如何正确指定HOC函数的类型，以便我接受带有组件的对象
专案：
interface PropsTypes {
text: () => void;
select: () => void;
}
interface Param {
settings: PropsTypes;
}
export const CustomFabric: React.FC<Param> = ({ settings }: Param) => {
const elements = Object.entries(settings);
const newSettings = elements.reduce((acc: any, item: any) => {
const key = item[0];
const Component = item[1];
acc[key] = (props: any) => {
const [value, setValue] = useState('');
const onChange = (event: { target: { value: any } }) => {
setValue(event.target.value);
};
return <Component value={value} onChange={onChange} {...props} />;
};
return acc;
}, {});
return (type: any) => {
return newSettings[type];
};
};
有许多与此代码的问题，而是你张贴的特定错误是由于声明的类型，CustomFabric因为React.FC<Param>当它不是一个功能组件。
函数组件是一个带有单个参数（props对象）的函数，并返回一些JSX元素。您CustomFabric需要道具，但会返回function。因此它本质上与React.FC类型不兼容。
我试图弄清楚这段代码应该做什么，因为您的键入与您的使用方式不匹配。它看起来像text并且select应该是组件，但是您的界面说它们是不带参数也不返回任何内容的函数。如果它们是组件，则应使用该React.ComponentType<Props>类型。
从根本上讲，我也不会“了解”具有受控输入的状态的含义，在该状态下，状态位于无法访问的黑匣子后面。CustomFabric似乎并没有给您任何访问状态的权限。所以我看不到这里要实现什么目标。
但是我们可以更好地正确键入您在此处的内容，这是一个返回钩子的函数。该代码通过声明以下内容解决了您的大多数问题：
text和select是其采取道具部件value和onChangeCustomFabric 将使用包含文本组件的对象进行调用，然后选择CustomFabric返回一个带有名称并返回一个组件的函数。该名称必须为'text'或'select'，并且返回的组件不需要任何道具。仍有很大的改进空间。例如，您的代码将其他道具传递给输入和选择，但这些类型不允许使用value和以外的其他道具onChange。您settings只有两个属性，因此通过直接处理这些键而不是循环遍历，您将获得更好的类型推断Object.entries。
type InputComponent = React.ComponentType<{value: string, onChange: React.ChangeEventHandler}>;
interface PropsTypes {
text: InputComponent;
select: InputComponent;
}
export const CustomFabric = (settings: PropsTypes) => {
const elements = Object.entries(settings) as [keyof PropsTypes, InputComponent][];
const newSettings = elements.reduce((acc, item) => {
const key = item[0];
const Component = item[1];
acc[key] = (props: any) => {
const [value, setValue] = useState('');
const onChange = (event: { target: { value: any } }) => {
setValue(event.target.value);
};
return <Component value={value} onChange={onChange} {...props} />;
};
return acc;
}, {} as Record<keyof PropsTypes, React.FC>);
return (type: keyof PropsTypes): React.FC => {
return newSettings[type];
};
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句