Typescript + React/Redux:类型'IntrinsicAttributes & IntrinsicClassAttributes‘上不存在属性“XXX”
问题分析
在使用 TypeScript 和 React/Redux 开发时，有时会遇到类型错误，提示“类型'IntrinsicAttributes & IntrinsicClassAttributes'上不存在属性'XXX'”。这通常是因为 TypeScript 编译器无法识别某个属性在组件上的合法性。
基础概念
- TypeScript: 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，添加了静态类型系统。
- React: 是一个用于构建用户界面的 JavaScript 库。
- Redux: 是一个 JavaScript 状态容器，提供了一种可预测的状态管理方法。
原因分析
这个错误通常有以下几种原因：
- 属性未定义: 组件没有定义或导入所需的属性。
- 类型不匹配: 传递给组件的属性类型与组件期望的类型不匹配。
- 高阶组件（HOC）问题: 如果使用了高阶组件，可能会导致属性丢失或类型错误。
解决方法
1. 检查属性定义
确保组件定义了所需的属性。例如：
import React from 'react';
interface MyComponentProps {
XXX: string;
}
const MyComponent: React.FC<MyComponentProps> = ({ XXX }) => {
return <div>{XXX}</div>;
};
export default MyComponent;2. 检查属性类型
确保传递给组件的属性类型与组件期望的类型匹配。例如：
import React from 'react';
import MyComponent from './MyComponent';
const App: React.FC = () => {
const xxxValue = 'Hello, World!';
return <MyComponent XXX={xxxValue} />;
};
export default App;3. 处理高阶组件
如果使用了高阶组件，确保属性正确传递。例如：
import React from 'react';
const withExtraProps = <P extends object>(WrappedComponent: React.ComponentType<P>) => {
return (props: P & { extraProp: string }) => (
<WrappedComponent {...props} />
);
};
const MyComponent: React.FC<{ XXX: string }> = ({ XXX }) => {
return <div>{XXX}</div>;
};
const EnhancedComponent = withExtraProps(MyComponent);
const App: React.FC = () => {
const xxxValue = 'Hello, World!';
return <EnhancedComponent XXX={xxxValue} extraProp="Extra" />;
};
export default App;参考链接
通过以上方法，可以有效解决“类型'IntrinsicAttributes & IntrinsicClassAttributes'上不存在属性'XXX'”的问题。
相关·内容
我很难解决这个TypeScript问题。
...message: 'Type '{ show: boolean; children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemedOuterStyledProps<HTMLProps<HTMLDiv...'.
Property 'show' does not exist on type 'I
浏览 6提问于2017-05-20得票数 6
回答已采纳
我刚从一个react typescript项目开始，我得到了这个隐秘的错误： Failed to compile.
/Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx
TypeScript error in /Users/simon/Code/web/react-news-col/src/MainNewsFeed.tsx(27,35):
No overload matches this call.
Overload 1 of 2, '(props: {} | Readonly<{}>): NewsFee
浏览 665提问于2021-06-29得票数 1
我对我的React组件有下面的声明，它以前是在TypeScript 2.2中编译的，但现在它是TypeScript 2.3中的一个错误。
class MyComponent extends React.Component<void, {}> {
render() {
return <div> Hello </div>
}
}
// TS 2.3 : error TS2322: Type '{}' is not assignable to type
// 'IntrinsicAttributes & Intr
浏览 2提问于2017-04-27得票数 2
回答已采纳
1回答
当我想使用资料-ui@1.0.0-beta.10和打字本的抽屉时，我会收到以下错误：
TS2322:键入'{子代:元素；}‘不能分配到键入'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{子代？：ReactNode；}> &Re.’。类型'{子:元素；}‘不能分配到键入'Readonly>’。“{子元素:元素；}”类型中缺少属性“type”。
以下是我如何使用它：
<Drawer>
<List>
<
浏览 2提问于2017-09-15得票数 2
写完这句话后，typescript文件在下面的行上显示一个错误。 React-Native 0.60+你可以传入一个新的不透明属性： <View opacity={true ? 0.5 : 1}> </View> 错误堆栈:错误属性“”opacity“”在类型“”IntrinsicAttributes& IntrinsicClassAttributes“”视图不透明上不存在。“” 没有与此调用匹配的重载。重载%1，共% 2，‘(属性: ViewProps |只读)：视图’，给出了以下错误。类型'{ IntrinsicAttributes: Elemen
浏览 50提问于2021-07-20得票数 0
当我用typescript创建我的react应用程序时，我遇到了一个小问题，我还没能解决。
我的代码：
App.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } fr
浏览 0提问于2017-05-30得票数 8
回答已采纳
我是React + Typescript的新手，我正在尝试更新我创建的四个计数器，这取决于它们的值。正如您所看到的，每个计数器都有一个键，该键与数组中的id相关联。
但是，当我尝试添加：value={counter.value}，这样值就会更新，而不是每次都从零开始时，我会得到这样的消息：
" No overload matches this call.
Overload 1 of 2, '(props: Readonly<{}>): Counter', gave the following error.
Type '{ key: num
浏览 0提问于2020-03-02得票数 1
回答已采纳
1回答
财产历史不存在
、、、、
我正试图使用React和TypeScript启动一个新项目，我一直坚持使用Router，因为某种原因，TypeScript不承认history属性，尽管它应该是可用的。
我的组件
import * as React from 'react'
import * as ReactDom from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter as Router} from 'react-router-dom';
import crea
浏览 2提问于2017-10-27得票数 12
回答已采纳
当它出现在Javascript上时，它就能工作了。但是在typeScript上，说错了。为什么？我该怎么做？
App.tsx
class App extends React.Component<{}, null> {
handleCreate = (data) => {
console.log(data);
}
render() {
return (
<React.Fragment>
<PhoneForm **onCreate**={this.h
浏览 7提问于2020-06-01得票数 0
回答已采纳
在create-react-app typescript应用程序中实现react-bootstrap Tabs时，我遇到了一个问题。下面是我的代码。 import React from "react";
import { Link } from "react-router-dom";
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tabs';
export function Sonnet(props: any) {
r
浏览 33提问于2020-06-23得票数 2
回答已采纳
1回答
我刚开始使用typescript和redux，我正在尝试使用redux-form中的SimpleForm示例。
我有以下表单组件
import * as React from 'react';
import {Field, reduxForm} from 'redux-form';
class SimpleForm extends React.Component<any, any> {
public render() {
const { handleSubmit, doCancel } = this.props;
return
浏览 7提问于2017-07-27得票数 4
回答已采纳
7回答
我想在将来使用TypeScript，但是现在，我选择在中安装TypeScript。(稍后，我将返回并添加类型)
因此，我想禁用所有类型检查。
现在，当我做这样的事：
<PlaceSearchBar
placeSearchChanged={this.placeSearchChanged}
/>
class PlaceSearchBar extends React.Component {
...
}
我收到一个错误：
Type error: Type '{ placeSearchChanged: (place: any) => void; }' is
浏览 0提问于2019-02-03得票数 53
我正在使用recharts在react中构建一个图表--我在这里使用了他们文档中的一个示例：https://codesandbox.io/s/zen-ellis-30cdb?file=/src/App.tsx 在codesandbox中，项目会编译并运行，但您可以在第53行的代码中看到错误提示(并且它会在控制台中生成许多警告)。 在我的本地项目中，它无法编译并将错误打印到屏幕上。是什么导致了这个问题，它能被修复吗？ Overload 1 of 2, '(props: Readonly<Props>): Line', gave the following error
浏览 52提问于2021-01-08得票数 1
我正在使用"@react- navigation / bottom -tabs"："^5.11.11“并创建一个底部选项卡导航。但是，tintColor不适用于图像组件 import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from &#
浏览 106提问于2021-06-23得票数 0
将react项目转换为类型记录时发生类型抄本错误。
TypeScript error in /src/App.tsx(34,44):
No overload matches this call.
Overload 1 of 2, '(props: RouteProps | Readonly<RouteProps>): Route<RouteProps>', gave the following error.
Type '{ exact: true; path: string; name: string; render: (props:
浏览 10提问于2020-11-23得票数 2
回答已采纳
我使用react.js已经有一段时间了。最近，我开始看到一个错误，比如：
Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes'
我不知道怎么回事。我用谷歌搜索了一下，我发现别人说的是props的问题。这是我看到的一个场景。而不是：
<MyComponent action={this.state.action} />
下面的工作很好：
<MyComponent {...props} />
我想了解一下react中的In
浏览 1提问于2020-01-29得票数 15
回答已采纳
1回答
我不能从App.tsx中将道具传递给我的子组件，我也不知道为什么。我已经在网上看了2个小时了，但仍然没有有效的解决方案。有人知道问题出在哪里吗？它还给了我以下错误： “没有重载与此调用匹配。重载%1/% 2，'(props: Readonly)：CartView'，给出以下错误。类型'{ phrase: string；}‘不能赋值给类型'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ IntrinsicAttributes？：ReactN
浏览 15提问于2020-09-03得票数 0
回答已采纳
1回答
我正在使用带有typescript的react native，并且我想从状态更新我的样式属性。但它给了我错误。 const [VerifiedCheck, setIsVerifiedCheck] = useState("flex");
<View style={{display: VerifiedCheck}}>
<Icon name={'check-circle'} size={24} color={'green'} />
</View> 我在style上遇到错误 No overload matche
浏览 154提问于2021-06-30得票数 0
我有以下例子：
import * as React from "react";
import { connect } from 'react-redux';
interface IMessage {
message : string;
}
class SayMessage extends React.Component<IMessage, {}>{
render () {
return (<div>{this.props.message}</div>);
}
}
functio
浏览 6提问于2016-07-20得票数 3
我同时使用TypeScript和React Native。
import React from 'react';
import { Button } from 'react-native-elements';
import { IThemedButton } from '../../../models/themedButton';
interface IThemedButtonProps {
data: IThemedButton;
}
const ThemedButton: React.FC<IThemedButtonProps&
浏览 0提问于2019-04-19得票数 0
我目前在react路由器redux中传递正确的类型时遇到了typescript问题。
typescript-错误：
severity: 'Error'
message: 'Type '{ path: "/foo/:id"; component: typeof "<path>..' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ childr
浏览 0提问于2017-09-04得票数 0
我有一个名为导航栏的组件，它使用历史记录中的location对象，如RouteComponentProps中所定义。 我尝试向我的组件添加一个自定义道具，如下所示： interface IProps{
title?: string
}
class Navbar extends React.Component<RouteComponentProps<{}> & IProps>{
} 虽然这不会抛出错误，但当我尝试这样做时： <Navbar title="My Custom Page Title" /> Typescript抱
浏览 48提问于2021-01-29得票数 0
回答已采纳
fabric ui中有一个TextField输入，但我还没有找到为登录表单创建密码字段的方法。
编辑：
我尝试使用“type”属性，但得到了一个错误。
Property 'type' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TextField> & Readonly<{ children?: ReactNode; }>
这些是来自package.json的相关包：
"office-ui-fabric-react":
浏览 4提问于2017-07-18得票数 3
回答已采纳
我的Jest测试是在react原生上运行的，但当我检查Typescript linter时，我得到了这个错误：
error TS2339: Property 'store' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.
顺便说一下，我正在做react-native。
这是抛出错误的笑话行：const home =
浏览 0提问于2017-08-07得票数 1
我们已经购买了一个反应主题，意图使用它的组件在我们的web应用程序，我们结束了一些问题，让他们转过来，我们得到了解决。但是，我们现在遇到了类型问题。
我认为这里的问题是，类型记录不喜欢道具没有定义的类型，并且默认为IntrinsicAttributes。我想不用修改就能使用这些组件。
错误：
(TS) Property 'content' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Card> & Readonly<{ children?:
浏览 0提问于2018-03-15得票数 0
我正在做一个使用Typescript，React和Redux (都在Electron中运行)的项目，当我在另一个类中包含一个基于类的组件并试图在它们之间传递参数时，我遇到了一个问题。粗略地说，我得到了容器组件的以下结构： class ContainerComponent extends React.Component {
..
render() {
const { propToPass } = this.props;
...
...
}
}
....
export default connect(mapStateToProps, mapDisp
浏览 708提问于2017-03-08得票数 112
回答已采纳
1回答
我正在尝试将Redux Store连接到我的类型记录-React应用程序，但是收到了以下错误：
没有重载与此调用匹配。重载2中的1，‘(道具: Readonly>)：Provider'，给出了以下错误。类型'() => any‘中缺少’Store‘类型中的下列属性:分派、getState、订阅、replaceReducer、2的Symbol.observable重载2’(道具: ProviderProps、上下文？：any)：Provider'，给出了以下错误。类型'() => any‘不能指定键入'store’. to (2769)
浏览 3提问于2020-02-25得票数 1
回答已采纳
我对打字本的反应是新的，我收到了一个错误声明：
没有重载与此调用匹配。重载2中的1，‘(道具: Readonly<{}>)：IndexPage'，给出了以下错误。
键入{ notes：{ 1：{ _id: number；title: string；body: string；updatedAt: Date；}；}}“不能指定键入'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{子代？：ReactNode；}>‘。类型
浏览 1提问于2020-01-04得票数 12
回答已采纳
我们正在将一个大型的项目转换为TypeScript。
我们有定义React类的现有文件：
// foo.js
class Foo extends React.Component { ... }
module.exports = Foo
我们希望在新的TypeScript文件中使用这些组件：
// bar.tsx
import Foo from "./foo"
export default class Bar extends React.Component<any, any> {
render() { return <Foo baz="buz
浏览 3提问于2017-08-05得票数 1
经过相当多的谷歌搜索后，我仍然找不到使用ag-grid-react和typescript的例子，尽管ag-grid-react项目似乎有typescript类型。 在我的react应用程序中，我安装了ag-grid-react：npm i --save ag-grid ag-grid-react react-dom-factories 这段代码看起来像jsx文件，但如果我尝试将它用作typescript tsx文件，我会得到编译器错误： const columnDefs = [
{headerName: 'Make', field: 'make'},
浏览 57提问于2019-03-20得票数 4
考虑到以下组件，我得到了一个关于缺少isUpdating支柱的错误。我该怎么解决这个问题？
错误：(87，27) is 2322:键入'{ name：“弗雷德；}‘不能指定键入'IntrinsicAttributes & IntrinsicClassAttributes> &Reado.’。键入“{ name：”"Fred"；}“不能指定键入”Readonly“。属性'isUpdating‘在类型'{ name："Fred"；}’中缺失。
interface ContaineeProps {
na
浏览 3提问于2017-06-09得票数 0
回答已采纳
我有一个家长肚脐部件。
const Navbar:React.FC = () => {
const classes = useStyles();
const [displayDialog, setDisplayDialog] = useState(false);
function doSomething(){
console.log('do something')
}
return (
<AppBar className={classes.background} position="static">
浏览 2提问于2020-09-22得票数 0
2回答
我有一个父组件，我想将数据发送到它的子组件。
我尝试使用传递数据的react方法，但得到了错误。
错误：
键入“{ pdata: number；}”不能分配到键入“IntrinsicAttributes& IntrinsicClassAttributes & Readonly<{子代？：ReactNode；}&Readonly<{ }>”。'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{子？：ReactNode；}> &Readonly
浏览 2提问于2019-11-21得票数 0
回答已采纳
使用了一段时间的反应，但新的反应本地人。
我使用的是顺风和
import { View, Text } from "react-native";
import React from "react";
export default function Navigation() {
return (
<View className="grid h-screen w-screen place-items-center">
<Text className="text-red-800">Tes
浏览 27提问于2022-07-08得票数 2
我用react-native-css-transformer做世博会。当我使用js文件时，它可以工作。但是，如果我将js改为tsx，就会在className上出现错误。但它的工作原理是如何隐藏/删除此错误？
No overload matches this call.
Overload 1 of 2, '(props: TextProps | Readonly<TextProps>): Text', gave the following error.
Type '{ children: string; className: any; style:
浏览 11提问于2022-11-24得票数 1
我想将自定义属性传递给我的Redux-Form-Field。文件中说：
传递给Field的任何自定义道具都将在与输入和元对象相同的级别上合并到支持对象中。
但是，将自定义道具传递给Field组件将引发编译错误：
<Field
name="E-Mail"
component={MaterialTextField}
myProp="Test"
/>
属性'myProp‘在类型上不存在(IntrinsicAttributes& IntrinsicClassAttributes> &.
在prop
浏览 4提问于2017-09-08得票数 21
回答已采纳
打破我的头脑，我不能弄清楚如何通过HOC实现typescript的变异，并获得给予组件的道具。例如，我想要表单的'section‘名称，但在下面的示例中，我收到了一个错误 type FormCollectionProps = {
mutate: any;
section: string;
}
type FormCollectionOnSortProps = {
oldIndex: number;
newIndex: number;
}
const withSectionData = graphql<{}, {}, {}, FormCollectionP
浏览 5提问于2019-03-12得票数 0
2回答
我试图使用TypeScript和Material的组件进行交互。不幸的是，我遇到了这样的错误：
属性'openToYearSelection‘在'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{子代？：ReactNode；}> .’类型中不存在。
import * as React from 'react';
import DatePicker from 'material-ui/DatePicker';
interface IState
浏览 0提问于2018-05-03得票数 6
1回答
我对打字稿是新手，我不知道如何用它正确地打字。我已经花了一整天的时间想办法解决这个问题，但没有成功。我有一个非常基本的BaseComponent代码片段和一个简单的HOC。由于某些原因，在创建BaseComponent时，我得到的是类型记录错误：
Type '{ total: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<
浏览 6提问于2020-10-22得票数 0
我正在使用create app和类型脚本作为一个基础，试图得到一个简单的例子来重新组合。
问题是我不能直接将属性发送给组件.
我创建了一个简单的用户组件./components/User.tsx
import * as React from 'react';
import { compose, withState, withHandlers } from 'recompose';
export interface WithStateProps {
counter: number
setCounter: (x: (c: number) =>
浏览 1提问于2017-10-01得票数 5
回答已采纳
我正在使用Swagger UI，下面的代码在jsx和React中工作得很好。
<SwaggerUI
url={SPEC_FILE}
responseInterceptor={(response: Response) => {
//console.log("response ", response);
if (response.url === REQUEST_URL && response.status === 200) {
setData(response.data);
}
浏览 13提问于2020-06-02得票数 1
编辑:我意识到这实际上是工作了，尽管有错误消息！因此，我并不真的需要实现方面的帮助，但我想知道如何消除错误。为什么在代码正常工作的时候它会给我一个错误，我应该做些什么来消除它(除非我应该忽略它，因为代码正在工作？)？在我学习Typescript来解释这样的错误时，这将是非常有帮助的。
我正在使用Typescript和React Native，我希望能够只播放到我的lottie文件的特定帧。这是我尝试过的：
const lottieRef = useRef<LottieView>();
useEffect(() => {
if (lottieRef &&
浏览 3提问于2021-05-21得票数 1
这是TypeScript的新手，我觉得它应该非常简单，但是我不太喜欢它的语法！
非常简单的组件：
import * as React from "react";
import ControlArea from "./ControlArea";
interface IControlAreaProps {
welcome?: any;
}
export class Layout extends React.Component<IControlAreaProps> {
public render() {
return (
浏览 28提问于2018-02-21得票数 3
回答已采纳
我已经使用typescript link - https://github.com/zeit/next.js/tree/master/examples/with-typescript创建了基本的nextjs应用程序 我无法将className属性添加到任何元素。出现以下错误。“IntrinsicAttributes& IntrinsicClassAttributes & Readonly & Readonly<{ IntrinsicAttributes？：ReactNode；}> }”类型上不存在属性“”className“” 我也得到了其他属性的类型错误
浏览 97提问于2019-10-07得票数 6
我在<StoreProvider ...>上发现了这个错误，为什么？孩子们有什么问题吗？
TS2769: No overload matches this call.
Overload 1 of 2, '(props: { store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; } | Readonly<{ store: Store<StoreModel, EasyPeasyConfig<undefined, {}>>; }>): StoreProvi
浏览 10提问于2022-04-29得票数 1
2回答
我试着用redux连接类型记录。我对connect和withRouter的使用感到困惑。
我试着用它，
withRouter<any>(connect<{},ComponentProps,{}>(
matchStateToProps,
matchDispatchToProps
)(Component));
当试图传递属性productList时，
TS2339:属性'productList‘在'IntrinsicAttributes & IntrinsicClassAttributes，ComponentState>&g
浏览 0提问于2018-04-24得票数 0
我不知道如何使用类型记录为我的组件设置默认值。
这是源代码：
class PageState
{
}
export class PageProps
{
foo: string = "bar";
}
export class PageComponent extends React.Component<PageProps, PageState>
{
public render(): JSX.Element
{
return (
<span>Hello, world</span>
浏览 7提问于2016-05-17得票数 208
回答已采纳
下面的代码是我试图使用类型记录和react本机执行的代码，它给我VSCODE IDE中的类型记录错误。
import { TouchableOpacity } from "react-native";
<TouchableOpacity
primary
transparent
onPress={this.send}
>
<Text style={styles.btnText}>Send</Text>
</TouchableOpacity>
在VSCode中给出了以下类型记录错误：
(alias)
浏览 0提问于2019-11-25得票数 1
我正在尝试创建一个使用任何属性的简单的React组件。any的以下语法拒绝工作(<之前的意外令牌)：
export class ValidatedInput extends React.Component<any, any> {...}
将any替换为{}可以消除错误(请有人解释一下两者之间的区别)：
export class ValidatedInput extends React.Component<{}, {}> {...}
但是，现在当我在另一个文件中使用组件时，它会抱怨我发送到组件中的属性。例如：
<ValidatedInput
entit
浏览 18提问于2017-08-17得票数 3
回答已采纳
我创建了一个tsx react组件，如下所示：
export interface FABProps { onClick: Function; children?: any; otherProps?: any }
export interface FABState { onZoomButtonClick?: Function; }
export default class FAB extends React.Component<FABProps, FABState> {
static getInitialState() {
return {onZoomBut
浏览 1提问于2016-09-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
