如何在TypeScript中正确键入泛型React函数组件开发者社区

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

长情的啤酒 · 表格 wps excel vba ...· 3 月前 ·

瘦瘦的菠萝 · AMD Customer Community· 5 月前 ·

冷静的咖啡 · 上海文化广场· 6 月前 ·

谈吐大方的爆米花 · 成年身份证号游戏专用 - 百度· 6 月前 ·

善良的芹菜 · RecyclerView滚动事件分析与OnS ...· 6 月前 ·

腾讯云

开发者社区

文档意见反馈控制台

首页 TVP

文章/答案/技术大牛

发布

import React from 'react';
type PropsType = {
  id: string,
  value: string,
type GenericPropsType<keyType> = {
  id: keyType,
  value: string,
const Element: React.FC<PropsType> = ({ id, value }) => {
  return <div>{id.toString()}={value}</div>;
const GenericElement: React.FC<GenericPropsType<keyType>> = <keyType = string>({ id, value }) => {
  return <div>{id.toString()}={value}</div>;
};

Type 'Element' is not assignable to type 'FC<GenericPropsType<any>>'.
Type 'Element' provides no match for the signature '(props: PropsWithChildren<GenericPropsType<any>>, context?: any): ReactElement<any, any> | null'.
Cannot find name 'keyType'.
Property 'keyType' does not exist on type 'JSX.IntrinsicElements'.
Cannot find name 'id'.
Left side of comma operator is unused and has no side effects.
Cannot find name 'value'.
Cannot find name 'id'.
Cannot find name 'value'.
Identifier expected.
Unexpected token. Did you mean `{'>'}` or `&gt;`?
Expression expected.
Unexpected token. Did you mean `{'}'}` or `&rbrace;`?
JSX element 'keyType' has no corresponding closing tag.
'</' expected.
'Element' is declared but its value is never read.

import React from 'react';
import ReactDOM from 'react-dom';
type GenericPropsType<keyType> = {
  id: keyType,
  value: string,
const GenericElement = <keyType extends string | number = string>({
  value = ''
}: GenericPropsType<keyType>): JSX.Element => {
  return (<div>{id}={value}</div>);
const UseGenericElement: React.FC = () => {
  return (<div><GenericElement id={4711} value="4711" /></div>);
ReactDOM.render(
  <div><UseGenericElement /></div>,
  document.getElementById('root');
);

import React, { FC } from 'react';
type GenericPropsType<T = any> = {
  id: T,
  value: string,

回答 2

Stack Overflow用户

Stack Overflow用户