在TypeScript中为React组件做继承的正确方式是什么？
在TypeScript中为React组件做继承的正确方式是使用类继承。可以创建一个新的类，并让它继承自React.Component类。然后，在新的类中定义组件的逻辑和渲染方法。
下面是一个示例代码：
import React from 'react';
class MyComponent extends React.Component<Props, State> {
// 组件的props类型定义
interface Props {
// props属性定义
}
// 组件的state类型定义
interface State {
// state属性定义
}
constructor(props: Props) {
super(props);
// 初始化state等操作
}
render() {
// 组件的渲染方法
return (
// JSX模板
);
}
}
export default MyComponent;在这个示例中，我们创建了一个名为MyComponent的新类，并让它继承自React.Component类。在类中，我们定义了组件的props和state类型，并在构造函数中初始化了props。然后，我们实现了组件的render方法来定义组件的渲染逻辑。
这种方式可以让我们在TypeScript中使用类的方式来定义React组件，并且可以获得类型检查和自动补全的好处。同时，这也是React官方推荐的组件定义方式。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（MPS）：https://cloud.tencent.com/product/mps
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Meta Universe）：https://cloud.tencent.com/product/metauniverse
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估。
相关·内容
我一直将React组件(使用typescript)定义为：
function MyComponent(props: PropsType): React.ReactElement | null {
//...
}
我在网上看到了很多这样的例子：
const MyComponent: React.FC = (props: PropsType) => {
//...
}
我知道它们几乎是一样的，但在Typescript社区中首选的约定是什么？
浏览 2提问于2019-08-13得票数 5
我在应用程序中使用react-bootstrap Button，并希望声明扩展Button的ButtonPageChange类，以在属性className中定义值'btn-loading'。 在不使用typescript的情况下，我有以下React组件： export const ButtonPageChange = ({onClick, href, disabled, variant, size, className, children}) => {
return (
<Button onClick={onClick}
浏览 26提问于2020-04-26得票数 0
回答已采纳
我已经在Visual Studio2019 nodejs项目中创建了一个Typescript程序，但是如果我没有包含以下声明，如果我使用setState方法或this.props，它将导致错误。 export default class ReduxTest extends React.Component {
props: any;
state: any;
setState: any;
... types文件夹位于项目的正下方。在Types文件夹中，有一个定义文件react.d.ts。所以我不知道如何设置tsconfig.json。tsconfig.json的设置如下。
浏览 11提问于2019-05-02得票数 2
2回答
为了提供一些条件呈现逻辑，我试图将现有的react组件(React)封装到一个高阶组件(HoC)中。我面临的困难是让TypeScript生成一个将HoC包装器和包装组件属性结合在一起的组件。
例如：
import React from "react";
import Select from "react-select";
interface HOCProps {
foo: string
}
// Return a type with the HOCProps properties removed.
type WitoutPrefilled<T e
浏览 0提问于2019-03-03得票数 2
回答已采纳
我想知道如何将JSX (如"div“或"span")传递给我自己的组件。因此，我尝试使用React.ReactType来支持两者。我的代码如下所示：
LazySvgIcon.tsx
import * as React from 'react'
interface Props {
src: string
loading?: React.ReactType
error?: React.ReactType
}
interface State {
isLoading: boolean,
hasError: boolean
}
expor
浏览 0提问于2019-01-29得票数 0
为什么下面的react本机代码会给出typescript错误？
type ContainerProps = BaseProps & {
children: React.ChildrenArray<React.ReactElement<any>>;
withGutter?: boolean;
};
任何命名空间“React”都没有导出的成员“ChildrenArray”。.ts(2694)
正确的表达式是什么？这最初是基于流的js代码被转换为typescript...
浏览 2提问于2019-11-25得票数 0
我正在尝试使用Typescript在React Router中实现Scroll Restoration，代码如下。 import { Component } from 'react';
import { withRouter } from "react-router-dom";
export interface IProps {
prevProps?: any;
location: object;
pathname?: any;
}
class ScrollToTop extends Component<IProps, object&g
浏览 73提问于2019-04-21得票数 0
回答已采纳
我如何输入一个typescript变量，以便它需要一个设置了key的组件？ 我想要这样的东西： const foo: ReactElementWithKey = <div key="some key"></div>
// all ok
const bar: ReactElementWithKey = <div></div>
// no `key` - typescript should show an error 我应该如何定义ReactElementWithKey？ 我尝试过这样的方法： type ReactElemen
浏览 45提问于2021-09-07得票数 0
在现代JS中，我们可以直接为React组件设置初始状态，如下所示：
class App extends React.Component {
state = {value: 10}
render() {
return <div>{this.state.value}</div>
}
}
当我尝试使用Typescript执行此操作时，TSLint说“类属性'state‘必须标记为'private’、'public‘或'protected'”。如果我将其设置为“私有”，林特将在App上报告Class 'App
浏览 2提问于2018-10-11得票数 12
回答已采纳
2回答
我在WebStorm中创建了一个使用expo init创建的项目，该项目的IDE配置为在@typescript-eslint中使用ESLint，并且启用了“类型记录语言服务”(并且TSLint已禁用)。
如果我将App.tsx 的内容替换为下面的代码，将在IDE的编辑器中突出显示许多检查错误。我可以(正如预期的那样)用
/* eslint-disable @typescript-eslint/explicit-member-accessibility, @typescript-eslint/no-use-before-define, @typescript-eslint/explicit-fu
浏览 0提问于2019-08-09得票数 4
回答已采纳
1回答
我有一个react项目，我们称它为my-app。我希望其他人能够为我的应用程序创建插件。我有一个typescript接口，插件应该导出一个实现它的类。我不知道的是如何编写项目之间的依赖关系。
似乎插件项目应该依赖于my-app，因为它需要导入接口。但是my-app应该依赖于插件，这样它才能调用实现类。这很糟糕，因为它需要手动从插件导入类，并在my-app的代码中调用插件类的构造函数。另外，这也是一种周期性的依赖。
在package.json中编写依赖项以实现此插件体系结构的正确方法是什么？
浏览 1提问于2020-02-02得票数 2
1回答
我刚刚创造了：
使用"npm init模具“向导构建了一个名为”myApp“的stencilJS组件库，并使用”离子启动myApp选项卡“成功地构建了一个离子反应应用程序。
现在，我想使用默认的"my-component“，也就是我的-lib中的MyComponent，所以我
在应用程序package.json依赖项中添加了"my-lib" : "../my-lib"，“namespace”ed it 尝试了许多导入组合以到达组件命名空间中的MyComponent，“最佳”是。
import {Components} from '
浏览 0提问于2020-06-19得票数 0
在TypeScript中描述反应组件类型的正确方法是什么？假设我们有一个函数，它返回一个react组件。职能：
const getTabContent: () => ReactElement = () => {
switch (tab) {
case 1:
return <Images images={images} onSelect={onSelect}/>;
default:
return <Search onSelect={onSelect}/>;
}
};
在这里，我将返回类型描述为ReactEleme
浏览 1提问于2019-07-09得票数 60
回答已采纳
1回答
我正在构建一个包含一些组件的React UI库，比如按钮、输入、文本等，让我们称之为mylib。我将在许多项目中重用它，比如在myApp中。我将使用TypeScript，因此我必须将其编译为ES6。它将使用.less文件进行样式设置。
我的问题是关于.less文件的。我不知道正确的方法是什么:我应该用myLib还是myApp编译它们？是否可以只使用TypeScript编译器，或者因为任何原因也使用Webpack更好？我试过了，但我不确定是不是正确的。
我的想法是在myLib中编译TypeScript，但让myApp编译.less文件:我将源代码放在src文件夹中，然后使用TypeScript编
浏览 1提问于2019-09-13得票数 0
我正在努力将React应用程序迁移到最新的v17.x版本(从16.13.0)。
然而，当我升级React时，我在typescript文件上得到了解析错误(该应用程序主要使用javascript，但一些文件后来被添加到typescript中)。
例如：
src\components\data\Assets\FYAsset.ts
Line 2:11: Parsing error: Unexpected token
1 | export class FYAsset {
> 2 | private apiData: Object | undefined; // the res d
浏览 1提问于2020-12-27得票数 0
1回答
我有一个项目，最近我改成了typescript。在这个项目中，我使用slick作为我的carousel组件。我使用它的组件使用了一个非常简单的逻辑:如果窗口是移动的(宽度状态钩子)，则呈现轮播。如果不是，则呈现另一个组件。代码如下： import Slider from "react-slick";
...
const ParentElement = (width > 992) ? ItemsWrapper : Slider;
return (
<ParentElement {...settings}>
浏览 19提问于2021-07-31得票数 0
回答已采纳
下面是在typescript中实现react类的方式：
export class Signup extends Component<SignupProps, SignupState> {}
interface SignupProps {
onSignup: (e: FormEvent, state: SignupState) => void;
}
interface SignupState {
data: {
email: string;
password: string;
name: string;
};
}
由于我有注册和登录表单，为
浏览 22提问于2020-11-13得票数 0
3回答
我正在建立一个设计系统库在反应和TypeScript使用故事簿。大多数组件支持使用style支柱设置自定义样式。我正在尝试使用特性在故事簿中反映这一点。
考虑使用变体并尝试添加样式道具的Button故事：
// Button.stories.js
import { Button } from './button';
export default {
component: Button,
title: 'Button',
argTypes: {
variant: {
control: {
type: 'r
浏览 5提问于2021-04-09得票数 4
回答已采纳
我目前正在尝试使用TypeScript用React编写一个小的包装器组件。这是我的包装器：
function ConditionalWrapper({ condition, wrapper, children }: { condition?: boolean, wrapper?: (children: React.ReactNode) => any, children?: React.ReactNode }) {
return condition ? wrapper(children) : children;
}
然后可以像这样使用
<ConditionalWrapper
浏览 6提问于2020-02-12得票数 0
回答已采纳
5回答
我有一个REACT-STATELESS-COMPONENT，在一个与TypeScript的项目中。它有一个错误，说，
Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type)
我不知道它要我做什么。这是我的代码：
import React, { Fragment} from 'react';
import IProp from 'dto/IProp';
export interface Props {
prop?: IProp;
}
c
浏览 4提问于2019-02-21得票数 39
回答已采纳
这就是组件的排列方式。
class A extends React.Component {
state = {mode: 'create'}
abstract getRows() {
}
abstract getTitle(){
}
}
class B extends A {
getTitle(){
if(this.state.mode === 'create'){ return 'New';}
else {return 'Existing'};
}
浏览 2提问于2022-03-04得票数 0
2回答
如何从库中扩展react组件
、、、、
我想从FormControl扩展组件。不过，重要的是，我希望我的扩展组件能够取代react组件，这样从包中导入实际上就可以导入我的扩展组件。
大多数情况下，我需要更改呈现方法，通过查看input[type=text]和textarea节点的inputRef支柱，将其包含在绝对定位的计数器中。
做这件事最好的方法是什么？
浏览 3提问于2017-01-25得票数 0
使用带有for的TypeScript，我们不再需要扩展React.Props，以便编译器知道所有React组件道具都可以有子组件：
interface MyProps { }
class MyComponent extends React.Component<MyProps, {}> {
public render(): JSX.Element {
return <div>{this.props.children}</div>;
}
}
但是，对于无状态功能组件，情况似乎并非如此：
const MyStatelessComponent =
浏览 2提问于2016-11-22得票数 139
回答已采纳
我不知道这段代码中的类型错误是什么
import React from 'react';
interface IMenu {
items: {
title: string,
active: boolean,
label: string
}[]
}
type Action =
| { type: 'SET_ACTIVE', label: string }
const initialState: IMenu = {
items: [
{ title: 'Home', active: false,
浏览 0提问于2019-07-31得票数 5
回答已采纳
Typescript无法在使用React.Children.toArray的子项上检测props对象，我必须使用any[]，因为如果我使用ReactChild[] - props在数组项上检测不到。我怎样才能正确地输入出来呢？谢谢!
const items: any[] = React.Children.toArray(this.props.children)
// select whatever item was told to be onload first
const itemPaymentType = items[0].props['data-payment']
浏览 2提问于2018-09-27得票数 6
我一直在尝试在不破坏TypeScript类型系统规则的情况下，在React中创建一个抽象组件。根据React的类型，如果在组件的构造函数中设置了状态，则它必须是完整的(所有必需的属性都已分配)。一种选择是让子类设置整个状态，包括父类定义的值。为了避免可能导致的重复，我尝试这样做，以便子类可以将此信息传递给抽象类。这会导致一个Readonly错误，这对我来说意义不大。下面是我使用的代码：
import * as React from 'react';
function intersect<T1 extends Object, T2 extends Object>(o
浏览 0提问于2017-11-24得票数 3
我将TypeScript与RequireJS结合使用。正如您在下面的图像中所看到的，我使用RequireJS配置定义了一些导入；当然，这些导入是通过<script>标记获得的：
TypeScript看不到这些声明，所以我想把它们声明为全局值或其他什么的，以避免传递溢出错误。在这种情况下，最好的做法是什么？一切似乎都运行得很好，但我确实得到了更多的编译错误，当然，到处都是红色语法突出显示。
在第一个图像中，我们看到requirejs没有被识别，在下面的图像中，我们看到TypeScript不知道'redux'是什么(但它在RequireJS配置中)。
浏览 2提问于2017-01-20得票数 2
回答已采纳
我正在学习如何使用React-TypeScript，我对React.FC和泛型如何协同工作感到困惑。 因此，我有几个与以下代码相关的问题(一个返回列表项的函数组件)： 1.)你必须将道具作为泛型传递吗？或者你可以简单地写下 const TodoListItem: React.FC = (props) => {
//code
} 2.)todo是如何从<TodoListItemProps>中解构出来的？ 3.)为什么没有定义返回类型？它不应该写成： const TodoListItem: React.FC<TodoListItemProps> = ({todo})
浏览 37提问于2020-12-08得票数 0
我正在做一个既使用TypeScript又使用React的项目，我对这两个都是新手。我的问题是关于TypeScript中的接口，以及它与属性和状态的关系。到底发生了什么？我的应用程序根本不会运行，除非我声明了接口属性和状态，但我通过React构造函数使用了状态，并且我已经看到了将所有这些信息放入“接口MyProps”或“接口MyStates”中的示例。以下面的代码为例：
"use strict";
import * as React from 'react'
import NavBar from './components/navbar.tsx'
浏览 4提问于2016-04-20得票数 48
回答已采纳
我正在处理一个TypeScript React组件，它的属性也采用泛型类型，因此我将React组件声明为 export interface MyCompProps<T> {
items: T[];
labelFunction: (T) => string;
iconFunction: (T) => JSX.Element;
}
export const MyComp: FunctionComponent<MyCompProps<T>> = (props: MyCompProps<T>) => {
// re
浏览 20提问于2021-01-13得票数 0
在一个新的创建-反应-应用程序生成的项目与npx init create-react-app frontend --template typescript。每当我尝试运行start npm脚本时，都会弹出以下错误：
> frontend@0.1.0 start
> react-scripts start
./frontend/node_modules/webpack-dev-server/lib/Server.js:348
} catch {
^
SyntaxError: Unexpected token {
at createScrip
浏览 10提问于2022-01-31得票数 0
回答已采纳
我在我的react (typescript)应用程序中使用material-ui和react-router-dom 我尝试使用以下提示/帮助，以便当用户单击按钮(或其他任何按钮)时，他会被重定向到该路由。非常基本的东西。当我点击按钮时，浏览器中的url窗口中的url会更新，但不会加载正确的组件。我曾经使用bootstrap (和'react-router-bootstrap's NavigationLink)来解决这个问题，但是现在我被卡住了。 (我也使用Mobx作为状态处理器)，我也很喜欢其他路由器，如果这能让我的生活更简单的话 https://material-ui.co
浏览 13提问于2019-02-26得票数 2
我正在使用来自React Router v4的路由组件的render props使用Typescript和React实现经过身份验证的路由。 路由： import React from 'react';
import { Switch, Route } from 'react-router-dom';
import { ROUTES } from 'utils/constants';
import HomePage from 'components/pages/Home';
import GuestLogin from '
浏览 17提问于2020-08-18得票数 3
回答已采纳
Iam正在使用react本地0.63开发人脸识别应用程序。我正在使用react-native run-android运行我的项目。我得到未定义的组件异常不是一个对象(计算'_this')。我是新来的反应本地人，我不明白这个错误的含义。我是遵循这个应用程序的教程，但这个教程是非常古老的，这就是为什么我不能更新代码的最新版本的反应本机。这里是教程的链接。请看一看，解决我的问题。
import React from 'react';
import {StyleSheet,Text,View,Image} from 'react-native';
浏览 3提问于2020-10-22得票数 0
回答已采纳
根据定义，React项目中的顶级组件不会有任何道具传递给它。在使用Typescript时，正确的输入方式是什么？ 我最近一直在使用下面的模型，但也许有一种更简单的方法？ interface AppState {
...
}
class App extends React.Component<{},AppState> {
constructor(props: never) {
super(props);
this.state = {
...
}
...
}
...
浏览 24提问于2021-01-29得票数 0
回答已采纳
1回答
我得到了一个ScrollView，它首先作为JavaScript工作，然后作为TypeScript工作；这个ScrollView使用ref属性捕获ScrollView的引用，然后调用它的函数之一scrollToEnd()。但是我最近加强了我的衬垫，我需要找出正确的方法来输入这个引用属性实例。
我一开始是这样的：
import React from "react";
import {ScrollView, StyleProp, ViewStyle} from "react-native";
const standardStyle = {flex:1, backg
浏览 0提问于2020-10-20得票数 2
回答已采纳
props.children的反应是什么？
是什么定义了这些孩子？
它们是否在组件的呈现方法中定义？我想是的。
孩子们总是被渲染吗？如果是，那么为什么在使用react路由器时，我需要手动将{this.props.children}放到呈现方法中？那又有什么意义？
这就是我的意思：
// modules/App.js
// ...
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
浏览 2提问于2016-10-17得票数 0
回答已采纳
我正在尝试编写一个抽象的ReactJS类，然后扩展它。因此，我需要扩展它的props和state (据我所知，我是新手)。
基于展示如何从基类扩展props的，我创建了一个抽象类Animal
import * as React from "react";
export interface AnimalProps {
isHibernatory: boolean;
}
export interface AnimalState {
shouldHibernate: boolean;
}
// TS2322: Type '{ shouldHibernat
浏览 20提问于2018-01-02得票数 6
回答已采纳
在编写TypeScript (tsx)时，我通常使用React.FC<Props> (或React.FunctionComponent<Props>)输入我的React组件，其中Props是一个具有我自己的属性类型的接口。然后，键入系统会将children?添加到我的组件使用的道具列表中。 但这使得children道具成为可选的。 因此，对于没有子项的组件，我们有React.VFC；对于具有可选子项的组件，我们有React.FC。但是，我可以使用什么作为具有必需子组件的组件？ 我可以像这样手动完成，但我希望有一种更干净的方法。 interface ParentFunc
浏览 11提问于2021-01-31得票数 1
回答已采纳
我正在学习TypeScript，有些地方让我很困惑。有一点如下：
interface Props {
name: string;
}
const PrintName: React.FC<Props> = (props) => {
return (
<div>
<p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
{props.name}
</p>
</div>
浏览 2提问于2020-01-30得票数 151
回答已采纳
2回答
从Xbox游戏手柄监听按键事件的正确方式是什么？
流行语: UWP、HTML/CSS/JS、React、Typescript
浏览 4提问于2018-02-28得票数 0
我使用的是React和TypeScript，有两个函数组件：
List，它表示thingsLists的列表，该列表在<ul>中呈现给它的所有列表
这就是我想要定义Lists的方式
export function List() { ... }
export interface IListsProps {
lists: List[];
}
export default function Lists({ lists }: IListsProps) { ... }
如果List是一个类组件，这将是可行的。但是由于List是一个函数组件，所以TypeScript拒绝它。这里的Li
浏览 3提问于2022-06-05得票数 0
在我的Gatsby (React)项目中，我使用了typescript。我需要设置ESLint并且必须使用eslint-config-airbnb-typescript 我还使用了Prettier：prettier (与Gatsby一起提供)，并安装了以下软件包： npm install eslint-config-prettier eslint-plugin-prettier --save-dev 如果我看一下eslint-config-airbnb-typescript的文档，我没有看到任何关于@typescript-eslint/parser包的东西？ 他们展示了一个这样的例子： mo
浏览 62提问于2020-12-27得票数 0
回答已采纳
当我尝试在React中运行我的代码时，我得到了一个'activationDate‘不存在于类型’never‘上的'Property’错误，会出现什么问题？我敢肯定这跟Typescript有关。
编辑:导师类型是否仍有问题？不确定这是什么意思？
第二次编辑:作为参考，我按照本教程()创建了一个简单的GET请求，我只是不知道如何将其转换为typescript。
const TOKEN_KEY:string = `mpp-tk`;
type mentor = { activationDate: any }
class SamSearch extends React.Compon
浏览 1提问于2018-10-16得票数 4
我在React和typescript中使用插槽系统。问题是我找不到一个包含slot作为属性的接口，所以我从我的typescript检查器中得到一个错误： Property 'slot' does not exist on type 'IntrinsicAttributes & IStockProps & { children?: ReactNode; }'.
浏览 14提问于2019-09-30得票数 1
回答已采纳
我希望对我的PascalCase项目中JSX.Element类型的变量强制使用React+Typescript。我经常使用以下模式来创建功能组件，并且我喜欢通过给它一个PascalCase名称来区分我的同名导出：
//MyComponent.tsx
//PascalCase for MyComponent
export const MyComponent= (): JSX.Element =>{
return (
<div>
My Component
</div>
)
}
export default MyComponen
浏览 2提问于2021-06-02得票数 3
回答已采纳
我有一个使用typescript和office-ui-fabric的react项目。在简单的中，fabric css是从CDN加载的。
我想把css包含在我的webpack包中。最好的方法是什么？
从node_modules文件夹导入css是可行的。
import "../node_modules/office-ui-fabric-core/dist/css/fabric.min.css";
有没有其他更好的方法将css文件放入包中？
浏览 3提问于2017-02-20得票数 3
正如标题所述，在用create-react-app，设置的项目中编写不正确的类型记录-代码时，在通过npm test运行测试时，终端中不会出现任何错误。也许这是预期的行为？但是，获得错误以防止在测试中写入不正确的TypeScript也是很好的。
错误代码示例：
// App.test.tsx
it('Test of incorrect TypeScript', () => {
let aSimpleString: string = 'hello';
aSimpleString = 5;
});
如果你想知道我正在使用的类型记录-版本的创建-反应-应
浏览 1提问于2019-05-01得票数 9
回答已采纳
2回答
当使用Typescript在React中定义道具时，默认的React道具似乎会被任何界面所覆盖。有没有一种干净利落的方法来合并这两种方式，而不必指定React已经知道的每一个属性？
示例：
interface IProps { // extends React.???
title: string;
// Generally seen adding children?: any
// But this can get out of hand with onClick, onChange, etc
}
function MyComponent(props: IProps) {
浏览 0提问于2017-11-01得票数 2
2回答
我正在学习typescript，我正在学习这个教程：https://blog.alexdevero.com/react-and-typescript-pt3/。 当他谈到接口时，他以以下方式在react中使用它： // Create interface for class component props
interface PropsInterface {
heading: string;
}
// Create interface for class component state
interface StateInterface {
firstName: string;
l
浏览 46提问于2020-04-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
