admin管理员组文章数量:1327102
Following is the Form ponent
import React from 'react';
import { Elements } from '@helpers/ImportProxy';
import { mockApi } from '@constants/api';
type Props = {
// formValues: any
};
type MapKindToComponentT = {
[key: string]: React.SFC
}
/** @ponent */
export const Form: React.SFC<Props> = __props => {
const renderQuestions = () =>
mockApi.map(
(question, index): React.ReactElement | undefined => {
const mapKindToComponent: MapKindToComponentT = {
radio: Elements.RadioElement,
text: Elements.InputElement,
email: Elements.InputElement,
url: Elements.InputElement,
checkbox: Elements.CheckBoxElement,
dropdown: Elements.SelectElement,
textarea: Elements.TextareaElement,
};
if(mapKindToComponent[question.kind]) {
const Element = mapKindToComponent[question.kind];
return <Element key={index} question={question} />;
}
}
);
return (
<form>
{renderQuestions()}
<div>
<button type="submit">Submit</button>
</div>
</form>
);
};
export default Form;
Value of each key of mapKindToComponent
is React functional ponent.
Following is the error I get for it's currently defined type. Works fine with any
.
Type error: Type 'FunctionComponent' is not assignable to type 'FunctionComponent<{}>'. Types of property 'propTypes' are inpatible. Type 'WeakValidationMap | undefined' is not assignable to type 'WeakValidationMap<{}> | undefined'. Type 'WeakValidationMap' is not assignable to type 'WeakValidationMap<{}>'. Type '{}' is not assignable to type 'Props'. TS2322
Following is the Form ponent
import React from 'react';
import { Elements } from '@helpers/ImportProxy';
import { mockApi } from '@constants/api';
type Props = {
// formValues: any
};
type MapKindToComponentT = {
[key: string]: React.SFC
}
/** @ponent */
export const Form: React.SFC<Props> = __props => {
const renderQuestions = () =>
mockApi.map(
(question, index): React.ReactElement | undefined => {
const mapKindToComponent: MapKindToComponentT = {
radio: Elements.RadioElement,
text: Elements.InputElement,
email: Elements.InputElement,
url: Elements.InputElement,
checkbox: Elements.CheckBoxElement,
dropdown: Elements.SelectElement,
textarea: Elements.TextareaElement,
};
if(mapKindToComponent[question.kind]) {
const Element = mapKindToComponent[question.kind];
return <Element key={index} question={question} />;
}
}
);
return (
<form>
{renderQuestions()}
<div>
<button type="submit">Submit</button>
</div>
</form>
);
};
export default Form;
Value of each key of mapKindToComponent
is React functional ponent.
Following is the error I get for it's currently defined type. Works fine with any
.
Share Improve this question edited Mar 6, 2019 at 2:02 Ishan Patel asked Mar 6, 2019 at 1:47 Ishan PatelIshan Patel 6,09112 gold badges51 silver badges70 bronze badgesType error: Type 'FunctionComponent' is not assignable to type 'FunctionComponent<{}>'. Types of property 'propTypes' are inpatible. Type 'WeakValidationMap | undefined' is not assignable to type 'WeakValidationMap<{}> | undefined'. Type 'WeakValidationMap' is not assignable to type 'WeakValidationMap<{}>'. Type '{}' is not assignable to type 'Props'. TS2322
1 Answer
Reset to default 5Solution
Make it explicit that MapKindToComponentT
accepts function ponents of any kind.
type MapKindToComponentT = {
[key: string]: React.SFC<any>
}
Explanation
The default type parameter (the one that describes Props
) for React.SFC
defined in @types/react
is {}
.
type SFC<P = {}> = FunctionComponent<P>;
If a ponent expects some more precise type as its props, for example { foo: string }
:
declare const SomeComponent: React.SFC<{ foo: string }>;
such a ponent will not be assignable to React.SFC
.
const MyComponent: React.SFC = SomeComponent; // ⛔️ Compile-time error
const MyComponent: React.SFC<any> = SomeComponent; // ✅ OK
本文标签:
版权声明:本文标题:javascript - How to define TypeScript type for object wrapper that has string as a key & React SFC as a value? - Stack O 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742206225a2432862.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论