如何在React本机typescript类组件中使用扩展运算符
在React本机TypeScript类组件中使用扩展运算符，可以通过以下步骤实现：
- 首先，确保你的项目已经安装了React和TypeScript的相关依赖。你可以使用以下命令进行安装：
npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom- 创建一个新的React组件，并将其定义为一个TypeScript类组件。你可以使用以下代码作为示例：
import React, { Component } from 'react';
interface MyComponentProps {
prop1: string;
prop2: number;
}
class MyComponent extends Component<MyComponentProps> {
render() {
const { prop1, prop2, ...restProps } = this.props;
// 使用扩展运算符将剩余的props传递给子组件或其他地方使用
return (
<div>
<ChildComponent {...restProps} />
</div>
);
}
}
export default MyComponent;在上面的示例中，我们定义了一个名为MyComponent的React组件，并使用MyComponentProps接口定义了组件的props类型。在render方法中，我们使用扩展运算符将剩余的props传递给名为ChildComponent的子组件。
- 在其他地方使用
MyComponent组件时，可以像使用其他React组件一样传递props。例如：
import React from 'react';
import MyComponent from './MyComponent';
function App() {
return (
<div>
<MyComponent prop1="Hello" prop2={123} prop3="Extra prop" />
</div>
);
}
export default App;在上面的示例中，我们在MyComponent组件中传递了prop1和prop2，同时也传递了一个额外的prop3。在MyComponent组件内部，使用扩展运算符将剩余的props传递给ChildComponent。
这样，你就可以在React本机TypeScript类组件中使用扩展运算符了。请注意，这只是一个示例，你可以根据自己的需求进行修改和扩展。
相关·内容
4回答
如果我在我的项目中添加了@type/styled组件，那么构建输出中就会出现一堆错误：
ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(36,15):
TS2300: Duplicate identifier 'FormData'.
ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(81,5):
TS2717: Subsequent property de
浏览 0提问于2019-02-15得票数 30
回答已采纳
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
我正在尝试创建一个简单的页面，其中包括两个主要部分：Menu和Guide。在我的App,tsx中，我有：
import React from 'react';
import Guide from './Guide/Guide';
import './App.css';
function App() {
return (
<Guide />
);
}
export default App;
这很好。
但是，在./Guide/Guide.tsx中，我有：
import React, { Component } from
浏览 3提问于2021-12-20得票数 0
回答已采纳
1回答
我有一个用typescript在Angular中开发的应用程序，它有不同实体的列表视图的20+屏幕，如电影列表，演员列表，剧院列表等。我在angular中创建了一个BaseListComponent<T extends Base>，并封装了大多数常见功能，如查看，过滤，删除，搜索，分页等到这个BaseListComponent中。我正在创建它的子类，比如MoviesListComponent extends BaseListComponent<Movies>。这样，我需要在子类中添加最少的功能，这可以减少错误的范围，也可以减少单元测试用例的工作量。
现在我正在将此应用程
浏览 2提问于2020-03-20得票数 0
我刚刚开始用TypeScript编写反应测试代码，
Login.test.tsx
import React from 'react';
import { shallow } from 'enzyme';
import Login from './Login';
describe('Login', () => {
const login = shallow(<Login />);
});
Type '{}' is missing the following properties f
浏览 2提问于2020-08-20得票数 0
回答已采纳
1回答
当我导出带有connect的Room组件时，在App组件中，Room component设置的ref不能正常工作。如果连接被移除，它将正常工作。以下是主要代码演示的一部分。。
App.tsx
.....
class App extends React.Component<I_PROPS, I_STATE>{
private refRoom: React.RefObject<Room_T>;
constructor(props:any){
super(props);
this.refRoom = createRef();
}
rende
浏览 4提问于2020-08-03得票数 0
我正在使用带有typescript的React15。下面是我的代码：
const WrappedComponent = (WrappedComponent: React.ComponentType<any>) => (<WrappedComponent className="my-class" />);
WrappedComponent(<div />);
我定义了一个接受任何react组件的WrappedComponent方法。然后，我调用传递了<div />元素的方法。但是我得到了下面的错误：
Argument of
浏览 32提问于2018-08-17得票数 1
3回答
我目前正着手处理。
在文档中的一些CodeSandbox演示(例如)中，导入的东西称为“动画”：
import { Transition, animated } from 'react-spring'
然后像这样使用：
{this.state.items.map(item => styles => <animated.li style={{ ...defaultStyles, ...styles }}>{item}</animated.li>)}
在其他例子中，没有使用这一点：
import { Spring } from 're
浏览 3提问于2018-10-17得票数 6
回答已采纳
我已经在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
在Resive0.13之后，我们可以使用ES6类来创建像上面这样的React组件：
class A extends React.Component {
// ...
}
但是，如果我偶尔忘记键入extends React.Component，组件A仍然对我很好，只要我不使用this.setState()这样的简单方法。
我开始认为从React.Component扩展一个React组件是必要的。
在像通量或Redux这样的体系结构中，有智能的function组件和哑function的components.Smart组件连接到数据存储，而哑的只接收父母和呈现者的道具，我已经知道在functio
浏览 2提问于2015-10-06得票数 1
回答已采纳
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
我正在学习TypeScript，但是今天我看到了几行这样的代码：
const ROOT: ViewStyle = {
alignItems: 'center',
backgroundColor: color.primary,
borderRadius: 8,
flex: 1,
justifyContent: 'center',
marginHorizontal: spacing[2],
marginTop: spacing[2],
paddingHorizontal: spacing[4],
height: "10
浏览 11提问于2021-07-19得票数 1
我是app.tsx
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
我是package.json
"devDependencies": {
"@babel/core": "^7.5.0",
"@babel/runtime": &
浏览 7提问于2019-09-19得票数 2
我目前正在寻求改善我的应用程序的性能。基于这个例子：
class MyComponent extends React.PureComponent {
constructor(props) {
super(props);
this.doWork = this.doWork.bind(this);
}
doWork() {
// doing some work here.
// this.props.dispatch....
}
render() {
return <Text onPress={this.doWork}>
浏览 1提问于2018-02-13得票数 1
回答已采纳
1回答
我正在构建一个应用程序，作为一个测试，我将令牌存储在密钥链中。在导航中，我使用堆栈导航器和切换导航器。我正在尝试从密钥链中检索令牌，并使用它来确定intialRouteName :如果令牌存在->主，如果没有->身份验证。
这是我的密码：
Navigation.js
import React, { Component } from 'react'
import {
createStackNavigator,
createAppContainer,
createSwitchNavigator
} from 'react-navigation
浏览 2提问于2019-06-02得票数 0
1回答
我有一个git存储库，我应该使用命令react-scripts start启动它。当我运行这个命令时，我得到了这样的响应:无法找到typescript： react-scripts start
It looks like you're trying to use TypeScript but do not have typescript installed.
Please install typescript by running npm install typescript.
If you are not trying to use TypeScript, please remov
浏览 143提问于2021-09-03得票数 0
回答已采纳
3回答
我有一个项目，既漂亮和eslint安装。问题是，当我保存一个文件时，eslint会自动更改文件的格式，而且它似乎有一些规则与更漂亮的规则冲突。解决方案是什么？
这是更漂亮的格式：
保存后，文件将更改为：
这也是eslintrc文件
{
"parser": "@typescript-eslint/parser",
"extends": [
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
浏览 1提问于2020-08-01得票数 9
回答已采纳
我为内部项目创建了某种基本系统，我使用OOP方法实现了一个自定义表单系统，就像我使用TypeScript一样。
class Form extends React.Component {}
abstract class FormElement extends React.Component<{validations?:ValidationLogic[]}> {
validate();
setData();
setValidation();
}
class FormText extends FormElement {}
提到这些：
我想知道，是使用类的缺点纯粹是主
浏览 1提问于2018-03-17得票数 0
回答已采纳
此代码：
import * as React from 'react';
const Component = () => <div/>;
浏览 3提问于2017-02-04得票数 37
回答已采纳
我在组件树的顶部设置了一个错误边界，如下所示：
renderApp() {
return (
<ErrorBoundary>
{ this.props.children }
</ErrorBoundary>
);
}
如果错误出现在树上，错误边界将呈现一个简单的错误页面，并将错误本身作为一个属性进行传递：
componentDidCatch(error, info) {
this.setState({
hasError: true,
error
});
}
render() {
if (this.stat
浏览 11提问于2018-02-14得票数 3
回答已采纳
我想在父函数中定义的子函数中使用this.props.childName。但如果我使用this.props.parentName，就会出现TypeScript编译错误(Property 'name' does not exist...)，这没问题。如何访问子类的this.props？ interface Prop<T> {
parentName: string
}
class Parent<T> extends React.Component<Prop<T>, State<T>> {
constructor
浏览 19提问于2020-03-01得票数 2
回答已采纳
我正在阅读一本“反应学习”教材，它解释了我对胡克斯的看法。钩子部分工作正常。
作者演示了如何用一些易于使用的样式和相关组件定制钩子。
我有下面的代码。
import React from 'react';
// import logo from './logo.svg';
import './App.css';
import StarRating from './components/StarRating';
import StarRating2 from './components/StarRating2';
i
浏览 0提问于2020-09-15得票数 1
回答已采纳
2回答
有谁能帮我处理反应导航和世博会？问题在于当用户按下图标时，“汉堡”图标没有打开或关闭该组件的抽屉组件。然而，它确实打开/关闭一个默认的滑动手势，从反应导航。有关我的代码，请参阅下面：
路由器：
import React from 'react';
import { NavigationContainer, DrawerActions } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import
浏览 14提问于2022-10-26得票数 1
2回答
在App.tsx中，我将<Left />和<Right />传递给一个名为<SplitScreen />的导入组件
显然，“子”道具需要显式输入，因为响应18。如果我将其键入为React.Element[]，那么SplitScreen.tsx可以工作，但App.tsx抛出：
Type 'Element' is not assignable to type 'ElementType<any>'
如果我键入它为React.ReactNode (这似乎是目前的共识)，App.tsx可以工作，但是SplitScreen.t
浏览 6提问于2022-08-21得票数 0
我完全是一个来自Angular Typescript背景的反应新手。我选择用Typescript学习React是为了让我的转换比用javascript学习react更容易。谁能让我知道很好的基础视频反应与打字。有关于复数视线的基本视频，但可以使用javascript演示它。
我已经使用create- react -app命令创建了一个应用程序，其中包含react项目的框架。
我注意到这个文件有下面的const声明，而我在视频中看到的例子显示了一个带有render方法的类声明。有人能解释一下吗？
Scafolded输出
import React from 'react';
imp
浏览 2提问于2019-08-13得票数 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
回答已采纳
2回答
反应中常见的风格-本土化
、、、
背景:我对反应完全陌生--本地人。
问:从一个有经验的角度来看，我为什么不应该这么做？
目标：-有共同的风格在我的反应-本地应用？-使用优势的VSCode IntelliSense的开发。
#common/styles.js
import { Platform, StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
fontFamily: {
...Platform.select({
ios: {
fontFamily: 'Bas
浏览 0提问于2018-03-05得票数 0
我有一个包含一些划痕的TypeScript项目，我想通过运行tsc (然后在发出的JS上运行node )来测试这些文件。但是这样做会导致意外错误，并且无法报告合法的预期TS错误。
我在本地安装了一个(我相信是正确的)配置了npm的TypeScript，作为
$ ./node_modules/typescript/bin/tsc --version
Version 3.5.3
但是，当我尝试对一个tsc文件使用TypeScript时，我会得到意想不到的错误，例如在执行
npx tsc somefile.ts
此外，tsc (至少在上面调用时)无法发出任何预期的错误或编译器警告，例如，应该从
le
浏览 4提问于2019-08-13得票数 0
1回答
我有以下webpack.config.js文件：
module.exports = {
entry: "./Scripts/src/index.tsx",
output: {
filename: "./wwwroot/Scripts/dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx'
浏览 1提问于2017-12-06得票数 0
1回答
我已经使用React很长一段时间了，现在我想切换到使用。然而，我已经习惯了JSS风格(通过react-jss包)，我不明白我应该如何在TypeScript中使用它们。我还使用classnames包，有条件地分配多个类名，并获得相应的TypeSCript错误。
以下是我的React组件模板：
import React, { Component } from 'react';
import withStyles from 'react-jss';
import classNames from 'classnames';
const styles =
浏览 3提问于2020-01-06得票数 5
回答已采纳
我知道TypeScript定义文件帮助我们在TypeScript中使用JavaScript版本的代码。但是，我正在尝试理解React组件的TypeScript定义文件。这些问题是面试官问的，我不知道这些问题的答案。但我想知道。该组件是用JavaScript编写的，但也有类型记录定义文件。
Button.js:
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssMod
浏览 2提问于2019-12-04得票数 0
我正在学习TypeScript，并试图将TypeScript添加到我的宠物项目中。在ReactDOM.render函数调用中，我得到了以下错误：
没有过载和这个电话匹配。最后一次重载导致以下错误。
类型'BrowserRouter‘的参数不能分配给类型为'ReactElement<any，string any ((props: any) => ReactElement<any，any>酶null) \x(新的(props: any) => Component<any，any，any>)>[]的参数。
类型'Browser
浏览 3提问于2021-03-28得票数 2
回答已采纳
我想在现有的javascript项目中创建一些typescript组件。我的新组件将全部放在一个文件夹中，并将使用react-typescript编译器，而不是其他组件使用的react编译器。如何将此编译器定义到整个文件夹(以及其中的所有组件)，同时将现有编译器保留在项目中所有现有的bit组件上？
浏览 4提问于2019-12-18得票数 2
使用create-react-app和JavaScript/TypeScript，我知道我能够“导入”一个SVG，如下所示。我怎样才能用ReasonML做到这一点呢？
import { ReactComponent as Logo } from './logo.svg';
function App() {
return (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
}
浏览 5提问于2020-03-23得票数 3
回答已采纳
我正在尝试创建一个typescript React应用程序，在使用styled-components时遇到了一个问题。下面是我正在尝试的粗略想法： import React from 'react';
import styled from 'styled-components';
export type MyProps = {
wrapper?: React.Component,
};
const DefaultWrapper = styled.div`
background: blue;
`;
const MyComponent = ({wra
浏览 23提问于2020-10-05得票数 0
回答已采纳
1回答
我正在使用MUI v5，并且有一个简单的FormControl，如下所示，我知道属性fullWidth是有效的，如中所述。
import React, { PropsWithChildren } from 'react'
import { Theme } from '@mui/material/styles'
import styled from '@mui/material/styles/styled'
import InputLabel from '@mui/material/InputLabel'
import MenuIt
浏览 0提问于2021-10-24得票数 1
对于我的死亡，在过去的三个小时里，我无法理解这一点，我非常沮丧，所以如果我听起来很有侵略性，我会提前道歉。
我想要的只是能够为我的组件定义一个类型记录接口，并让它扩展任何组件使用的默认接口，以避免在我自己的接口中声明每一个该死的默认道具，比如className、onClick等等。
我有这样的组成部分：
import React, { useEffect, useRef, FunctionComponent } from 'react'
import './style.scss'
interface ISideProps {
wideModeEnabled
浏览 3提问于2019-11-18得票数 3
回答已采纳
我正在使用typescript在基于React的应用程序中创建一个表格。我正在实现表的搜索功能。有大量的数据可以显示在表中，所以我在后端执行搜索，排序，分页。 我有一个用于表的组件，它从父组件接收数据作为道具。我使用redux的react和sagas，我从后端获取数据。我使用redux状态向组件提供数据。我正在使用reducers来改变状态。 我面临的问题是，当我重新加载数据时，我获得了数据，并使用reducer改变了状态，但它没有显示在前端。但当我第二次尝试时，它显示了数据。 我的reducer代码如下。 const dataEnteries: Reducer<any> = (
浏览 21提问于2019-03-15得票数 0
我创建了一个TypeScript React应用程序，它使用：
yarn create react-app my-app --template typescript
这样，我的项目是用编译的，然后由捆绑。现在我想使用TypeScript ，默认情况下它在Babel中不受支持，但是它们是。我安装了所有必需的软件包：
在package.json中，我将react-scripts start改为react-app-rewired start。
最后，我创建了一个config-overrides.js文件：
const {
override,
addExter
浏览 4提问于2020-04-16得票数 3
回答已采纳
1回答
我有一个设置页面在我的应用程序，有设置，我希望能够访问，以修改另一个页面。这是设置页面：
const Settings = () => {
const [isSwitchOn, setIsSwitchOn] = React.useState(false);
const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
const [themeSwitchOn, setThemeSwitchOn] = React.useState(false);
const onToggleThemeSwitch = () =>
浏览 2提问于2022-01-17得票数 1
我想使用material-ui，使用react和typescript。我想把属性传递给组件，但是不知道怎么做。我使用material-UI代码库中的react-typescript示例。我尝试的内容如下：
添加一个属性接口：
const styles = (theme: Theme) =>
createStyles({
root: {
textAlign: 'center',
paddingTop: theme.spacing.unit * 20,
},
});
interface IndexProps
extends
浏览 3提问于2018-08-24得票数 0
回答已采纳
在我的样式组件上获取类型记录错误
类型'{子:字符串；}‘没有与类型’IntrinsicAttributes‘..ts(2559)相同的属性。
import React from 'react'
import { NotificationSuccess, NotificationError } from '../../styles'
interface IProps {
error?: boolean;
message: string;
}
export const Notification = (props: IProps) =&
浏览 0提问于2019-03-12得票数 36
回答已采纳
是否可以使用react原生应用程序中的所有reactjs组件?如果不能，在react js和react native之间切换的最佳方式是什么？
如果应用程序是使用react js完成的，那么是否有必要(强制)在其中使用redux？
浏览 3提问于2016-06-20得票数 12
升级typescript 3.9之后。我得到了这个错误 Property 'disabled' does not exist on type 'T'. 我看到扩展任何类型参数的类型参数不再充当任何https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#type-parameters-that-extend-any-no-longer-act-as-any 但是如何解决这个问题呢？ export interface Item {
name: React.Re
浏览 75提问于2020-07-13得票数 0
我刚刚被一个运行时异常咬了一口，因为我把React引用传递给了错误的组件。
我想知道TypeScript是否/如何在这里拯救我的培根？
精简测试用例：
import * as React from 'react';
class Modal extends React.Component<{}> {
close = () => {};
}
declare const modal: Modal;
modal.close();
const modalRef = React.createRef<Modal>();
// Let's
浏览 0提问于2019-05-30得票数 1
(转载于)
我猜这是@types/react和LazyExoticComponent定义的问题...
在带有类型参数的组件上使用React.lazy()时，Typescript无法再编译项目。
给定组件：
import React from "react";
export interface Props<T> {
value: T;
valueCallback: (t: T) => void;
}
export default function TypedComponent<T>(props: Props<T>) {
r
浏览 10提问于2020-05-08得票数 7
我习惯于将React组件连接到Redux，如下所示： 在index.js中： import { connect } from "react-redux";
import { doThing } from "store/actions";
import Component from "./component";
const mapState = (state) => {
const { foo } = state;
return {
foo
};
};
const mapDispatch = {
doThing,
浏览 24提问于2020-04-24得票数 1
回答已采纳
1回答
大家好，我正在努力学习ReactJS，我想知道为什么每个人都在使用标记来构建表单。
我是说当我使用这个代码时：
import { TextInput, Form, View } from 'react-native'
<Form onSubmit={this.onSubmit}>
<TextInput/>
</Form>
我发现了一个错误：
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件。
或者当我使用这个代码时：
impo
浏览 1提问于2017-09-12得票数 0
回答已采纳
我正在尝试将react-router-dom更新为v6，在我的TypeScript React应用程序中。
在中，简单地说：
在升级到v5.1的同时，您应该用钩子替换withRouter的任何用法。
它完全忽略了类组件！
我在网上搜索了很长一段时间，但是我找到了所有的文章
谈论JavaScript而不是TypeScript，或
谈论函数组件，或
参考v5 (或更低)的react-router-dom，因为他们谈论withRouter。
是否有一种在TypeScripp function应用程序中将function路由器-dom升级为v6的方法，它不需要将所有类组件重
浏览 3提问于2021-11-30得票数 5
5回答
卸载react-native-cli后，我运行以下命令来使用类型记录模板启动RN项目：
npx react-native init MyApp --template react-native-template-typescript
但我发现了一个错误：
警告笑话> jest-cli > jest-config > jest-environment-jsdom > jsdom
左pad@1.3.0:使用String.prototype.padStart()错误一个意外的错误发生："：Not“.info如果您认为这是一个错误，请打开.
1/2移除模块react-na
浏览 17提问于2019-09-24得票数 15
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
