Reactjs发现react组件类为‘`Property’的‘interface`问题在类型'Readonly<{}>`上不存在
React是一个用于构建用户界面的JavaScript库。React组件是构建React应用程序的基本构建块。每个React组件都有一个类或函数，它定义了组件的行为和外观。
在React中，组件类是通过继承React.Component类来创建的。组件类可以包含属性（props）和状态（state），并定义了组件的生命周期方法和渲染方法。
在给定的问题中，提到了一个名为'Property'的React组件类的'interface'问题。根据提供的信息，我们可以推断出可能存在以下问题：
- 'Property'组件类的定义中缺少一个名为'interface'的类型。
- 类型'ReadOnly<{}>'上不存在名为'interface'的属性。
为了解决这个问题，我们可以采取以下步骤：
- 确保在组件类的定义中包含了正确的接口类型。例如，可以创建一个名为'PropertyProps'的接口来定义组件的属性类型，并将其应用于组件类的泛型参数。例如：
interface PropertyProps {
// 定义组件的属性
}
class Property extends React.Component<PropertyProps> {
// 组件的实现
}- 检查类型'ReadOnly<{}>'上是否存在名为'interface'的属性。如果不存在，可能是因为在组件的其他地方使用了错误的类型或属性名称。需要仔细检查代码并确保使用正确的类型和属性名称。
总结起来，问题的解决方法是确保组件类的定义中包含正确的接口类型，并检查代码中是否存在错误的类型或属性名称。
关于React和React组件的更多信息，您可以参考腾讯云的React开发文档和相关产品：
- React开发文档：https://cloud.tencent.com/document/product/1140
- 腾讯云React开发工具包：https://cloud.tencent.com/product/tcb
相关·内容
我使用类型记录创建了这个程序：
import React, {FC} from 'react';
interface Interface {
name:string,
age:number
}
const Home: React.FC<Interface> = (info) => {
return (
<div>
<h1>{info.name}</h1>
</div>
);
};
export default Home;
浏览 2提问于2020-10-05得票数 1
回答已采纳
在这个简单的组件中，我传入了如下所示的MyProps：
interface MyProps {
profiles: IProfile[]
}
interface IProfile {
name: string;
avatar_url: string;
company: string;
}
我的组件将道具定义为MyProp，但是类型记录编译器抱怨this.state.profiles does not exist on type Readonly<{}>
class App extends React.Component<MyProps>
浏览 1提问于2019-10-29得票数 0
回答已采纳
1回答
目前，我有以下组件
SearchButton.tsx
export interface Props {
// some other props
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}
export const SearchButton: React.SFC<Props> = ({
// other props
onClick,
})
Popover.tsx
interface ButtonComponentProps {
onClick: (event
浏览 0提问于2018-08-23得票数 2
回答已采纳
我有一个基本的代码片段，其中道具是泛型的，我试图提供一个已经依赖于泛型类型的函数。对于非函数，一切都很好，但是当我试图在道具中提供一个函数时，我会出错。
import React from 'react';
import { concatClasses } from '@/utils/component';
import type { IOption } from '../interfaces/option';
import classes from './Filter.module.scss';
interface IP
浏览 9提问于2022-09-27得票数 2
回答已采纳
1回答
我对打字稿是新手，我不知道如何用它正确地打字。我已经花了一整天的时间想办法解决这个问题，但没有成功。我有一个非常基本的BaseComponent代码片段和一个简单的HOC。由于某些原因，在创建BaseComponent时，我得到的是类型记录错误：
Type '{ total: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<
浏览 6提问于2020-10-22得票数 0
在将方法TS2322作为道具从SearchBooks组件传递给SearchBooks组件时，遇到了一个JumboBooks错误：
JumboBooks.tsx (父母)
import { RouteComponentProps } from 'react-router';
...
export class JumboBooks extends React.Component<RouteComponentProps<{}>, {}> {
...
searchForBooks(searchFilters: SearchParameters){...}
浏览 1提问于2018-05-14得票数 0
回答已采纳
这是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
回答已采纳
我已经开始学习反应。
当使用时，我不确定如何在(父-子)组件之间传递值。
当我不使用connect或compose直接导出类时，效果很好。
误差
Type '{ dataFromParent: string; parentCallback: (data: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, any, any>> & Readonly<un
浏览 1提问于2020-03-26得票数 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
回答已采纳
我相信我已经用正确的方式声明了interface，并用类实现了它。但仍然收到错误，如下所示： Property 'show' does not exist on type 'Readonly<{}>'.ts(2339) 这里有谁能帮我更深入的理解吗？ 下面是我的代码： interface GlobalForm {
show:boolean
}
export class Footer extends React.Component<GlobalForm> {
constructor(props:GlobalForm){
浏览 12提问于2021-01-10得票数 0
回答已采纳
我以前使用过react，但使用类型脚本时，我遇到了将方法作为道具进行传递的问题。我很难理解互联网上的一些例子。 类型'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ companyId: string；}> & Readonly<{ children?：ReactNode；}>‘上不存在属性'onDrawerToggle’。TS2322 import React from 'react';
import HeaderBar from '
浏览 18提问于2020-04-21得票数 0
如果我尝试使用从HOC传递过来的道具，我会得到一个关于类型中缺少道具的错误。
我尝试了多种方法，但经过一些研究后，我想出了以下代码，从逻辑上讲，这些代码对我来说似乎是非常正确的，但不幸的是，它不能工作。
这是我的解决方案：
interface INavigationContext {
componentId?: string;
}
interface IAddNavigationContextProps {
navigation: INavigationContext;
}
export function addNavigationContext<P extends obje
浏览 7提问于2019-03-25得票数 0
回答已采纳
我需要创建一个React组件，以保护我的应用程序中的路由不受没有访问令牌的用户的影响。然后在父组件上使用这种特殊包装组件：
<Route
exact
path={INDEX_URL}
render={isAuthenticated((props: any) => (<LandingPage {...props} />))}
/>
我使用的类型记录，我有一些问题，连接功能和withRouter的反应路由器。
有人能帮帮我吗？谢谢，祝您周末愉快！
我已经尝试过用RouterProps和/或withRouter扩展我的接口，但是没有一个能工作。这
浏览 0提问于2019-01-18得票数 4
回答已采纳
我正在尝试创建一个自定义的“输入”组件，并扩展默认的html输入属性(props)。
但是，我也试图在我自己的接口定义中使用类型记录的省略来覆盖默认的'size‘属性，但是似乎无法让它工作。
(我还尝试了类型记录的选择/排除和自定义覆盖类型，但得到了相同的错误.)
我已经尝试过类似的线程：
import React from 'react';
type A = React.HTMLAttributes<HTMLInputElement>;
interface InputProps extends Omit<A, 'size'>
浏览 8提问于2020-10-09得票数 2
回答已采纳
我是TypeScript的新手，没能让错误消失。我尝试了很多方法，并尽可能地将any赋值给它，但我仍然收到以下错误：
(9,7): Type '(props: IRendererProps & { children?: ReactNode; }) => any[]' is not assignable to type 'StatelessComponent<IRendererProps>'.
Type 'any[]' is not assignable to type 'ReactElement<any
浏览 19提问于2018-07-23得票数 0
回答已采纳
我有一个警告定义，即“react/state in-constructor”(react/state in-constructor)不是foundeslint(react/state in-构造函数)。
Eslint版本6.8.0
我的文件.eslintrc.js中的代码
module.exports = {
env: {
node: true
},
extends: ['eslint:recommended', 'plugin:react/recommended'],
globals: {
Atomics: 'reado
浏览 1提问于2020-04-02得票数 4
回答已采纳
我尝试使用react 16.8和typescipt 3.4.5创建具有不变道具的react组件。
在这种情况下，类型记录抛出一个错误，
interface IProps {
readonly user: {name: string}
}
const User = (props: IProps) => {
props.user = {name: "Foo"}
return <>props.user.name</>;
};
Error:(8, 9) TS2540: Cannot assign to 'user' becau
浏览 1提问于2019-09-14得票数 6
回答已采纳
当在泛型中使用forwardRef时，我会得到Property 'children' does not exist on type 'IntrinsicAttributes'或Property 'ref' does not exist on type 'IntrinsicAttributes'。
上面复制的CodeSandbox链接中的相关代码如下：
interface SimpleProps<T extends string>
extends React.HTMLProps<HTMLButtonEleme
浏览 0提问于2019-09-02得票数 23
回答已采纳
我相信我知道如何对Office UI React组件使用样式，但我不确定正确的方法。如果我尝试设置样式属性，在TextField和DetailsList组件上都会得到一个TS2339编译错误，如下所示(在WebStorm中)。如果我尝试设置componentRef属性，则在检查元素时样式不会显示。
我做错了什么？我只想设置DetailsList的高度(这对TextField并不重要，但我在那里设置相同的样式是为了说明错误不是针对特定组件的)。
import * as React from 'react'
import { Fabric } from 'office-ui
浏览 0提问于2018-09-19得票数 1
我像下面这样做了mobx商店。
我在store.js中声明了操作类型
import { action, observable } from 'mobx';
export class SignStore {
@observable
UserInformation: {
email: '';
password: '';
};
@action
handleChange = (e: any): void => {
this.UserInformation[e.target.id] = e.target
浏览 0提问于2019-03-24得票数 2
回答已采纳
1回答
尝试获取组件工作的基本示例。下面的步骤是我所遵循的各种入门指南的组合
按以下方式设置节点依赖项
"dependencies": {
"http-server": "~0.8.0",
"forever": "0.14.1",
"gulp": "^3.9.0",
"gulp-chmod": "^1.2.0",
"gulp-inject": "^1.3.1",
"gul
浏览 1提问于2016-05-26得票数 1
回答已采纳
我正在使用codemirror创建一个组件，但我的代码中似乎有错误，因为当我试图更新我的主组件的状态时，应用程序破坏了浏览器，我的研究指向一个无限循环，至少我在尝试调试时可以看到这一点。
我希望你们中有人能帮我解决这个问题，也许是我的错，谢谢。
我的主要组成部分：
import React, { Component, PropTypes } from 'react';
import Editor from '../editor';
import Preview from '../preview';
class Playground extend
浏览 6提问于2016-08-24得票数 4
回答已采纳
我正在尝试学习redux表单和typescript，但我遇到了一个我无法解决的错误。 错误是：Property 'submitAction' is missing in type '{}' but required in type 'Readonly<IDispatchProps & Partial<ConfigProps<IUser, IDispatchProps, string>>>'.ts(2741) 这就是我认为错误的地方。 //Form.tsx import * as React from
浏览 114提问于2020-04-23得票数 4
回答已采纳
1回答
从反应元件继承
、、
你好，我使用的是类型记录+ react，我希望有一个基类和几个从基类继承的组件。
import * as React from "react";
interface IBaseProps {
title: string;
}
class Base<P extends IBaseProps, S> extends React.Component<P, S> {
public props: IBaseProps;
public render() {
return (
<h1>
浏览 4提问于2017-06-19得票数 1
回答已采纳
1回答
我有一个关于React抽象泛型类的问题。当我声明一个时，子类上缺少prop，可能我做了错误的泛型。主要问题是
Type '{ moving: "no"; }' is not assignable to type 'Readonly<AbCarState & S>'
我想做的是:让类可以是默认属性的泛型，状态和方法来扩展它，并创建新的类来改变它。
import React from "react";
import { render } from "react-dom";
interface Ab
浏览 41提问于2021-05-16得票数 0
ICrypto -
interface ICrypto {
readonly BTCUSD: number;
readonly ETHUSD: number;
readonly LTCUSD: number;
}
这是.tsx文件-
import React, { useState } from 'react';
import { backendAPIAxios } from '../../../utils/http';
import { ICrypto } from '../../../models/crypto';
impo
浏览 0提问于2021-10-23得票数 0
我在学习反应打字稿。我使用的反应谷歌地图显示我的地区。我成功地展示了这张地图。当我试图使用标记从反应-谷歌地图指出我的地区和定位我的纬度和经度。我收到打字错误：Property 'position' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMapReact> & Readonly<Props> & Readonly<...>。我真的不知道怎么解决它。
import React, { useEffec
浏览 0提问于2020-05-08得票数 2
回答已采纳
将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 16.9.0和类型记录3.6.3。
在上，他们建议不要在react类中定义实例属性：
只是不要。在组件实例上存储值就是这样做的：
ArbitraryWidget类扩展了React.Component { // .构造函数() { this.derp =‘某某物’；} handleClick () { this.derp =‘某某物’；}呈现() { var某事= this.derp；// .}}
这尤其糟糕，这不仅是因为您打破了在this.state上存储状态的明显惯例，而且因为在更新this.derp时，呈现不会自动触发。
但是在我的例子中，我的类有不
浏览 0提问于2019-09-12得票数 0
回答已采纳
2回答
我对打字稿很陌生，我必须从API中获得一张图书列表。我的教授给了我javascript中的代码来做这件事，但是我必须用类型记录和反应本机来完成这个任务。
获取api:
import axios from 'axios';
const api = axios.create({
baseURL: "https://hn.algolia.com/api/v1"
});
export default api;
列表组件：
import React, { Component } from "react";
import './List.
浏览 6提问于2021-12-17得票数 -4
问题
我用一个典型的特殊组件包装了一个组件，我在其他非TS项目中使用了一些格式。我的问题是，我不能在包装好的组件中使用特设的支柱currentBreakpoint，因为它希望它在组件的类型中：
Property 'currentBreakpoint' does not exist on type 'Readonly<OwnProps> & Readonly<{ children?: ReactNode; }>'. TS2339
然后导入特设的支持接口，并将其合并到组件自己的支柱接口中，然后我得到：
Property 'c
浏览 0提问于2019-06-10得票数 1
最近，我从TypeScript 2.1升级到所有较新的版本，我开始得到下面的错误，我的所有反应组件都遵循我的示例中的模式。这种嵌套组件模式在升级之前不会造成任何问题。
组件#1:
interface ISpinnerProps{
showGlobalSpinner: boolean;
}
class SpinnerClass extends React.Component<ISpinnerProps, undefined> {
render() {
return (
// Some markup
)
}
浏览 0提问于2017-06-04得票数 1
回答已采纳
我正在使用React + Redux处理我的第一个项目，当我尝试在componentDidMount部件中分派函数时遇到了一些问题。我试图遵循文档中的Reddit API example项目，但由于他们使用的是JavaScript，而我使用的是TypeScript，所以并不完全相同。 这就是我试图实现的React组件： export class EducationComponent extends Component {
constructor(props: any) {
super(props);
}
componentDidMount() {
浏览 30提问于2019-10-03得票数 1
我刚刚开始使用React路由器v4，并且无法使用浏览器路由器的历史记录。例如，当我试图访问this.props.history.push("/")时，我得到了一个错误：
TS2339: Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'
我使用Router v4和Browserrouter，并使用类型记录。反应路由器路由的三个道具(位置、历史、匹配)似乎没有传递给它的组件。，我是
浏览 1提问于2018-07-19得票数 1
回答已采纳
我试图使用两个接口之间的管道类型创建一个带有条件道具的React组件。我把它设置成这样：
interface BaseProps {
"aria-label"?: string;
className?: string;
onClick?: () => void;
}
interface IconProps extends BaseProps {
"aria-label": string;
children: never;
icon: React.ReactElement;
}
interface ButtonProps exte
浏览 4提问于2020-08-02得票数 0
1回答
我正在从getCount函数的孩子那里得到道具。把它设为州。而不是把它设置在组件中，得到无穷大的循环。我怎么才能解决呢？
有父组件的代码：
import React, { Component } from "react";
import Message from "./Message/Message";
export default class Widget extends React.Component {
constructor(props) {
super(props);
this.state = {
color: {
浏览 0提问于2018-06-26得票数 0
回答已采纳
2回答
我想问一下宽度上的打字错误
我创建了这个组件(进度栏)，其中我使用对组件进行样式化，但是即使我在其中放置类型，类型记录也会引发这种错误。
import { FunctionComponent, ReactComponentElement } from 'react';
//style
import { styled } from 'stitches';
import type * as Stitches from '@stitches/react';
//components
import Typo from '@components
浏览 9提问于2022-05-25得票数 1
我使用fabric-react组件，其代码与此处提供的代码相同：。
但是我在运行时会有跟踪错误。
Uncaught TypeError: Cannot read property 'map' of undefined
我的代码如下：
import * as React from 'react';
import { assign } from 'office-ui-fabric-react/lib/Utilities';
import { CommandBar } from 'office-ui-fabric-react/lib/Comm
浏览 3提问于2017-03-09得票数 0
回答已采纳
我试图在我的应用程序中使用，我正在用TypeScript编写该应用程序。我在文档中遵循，在文档中，setTimeout函数似乎被定义为导入ReactTimeout的支柱。我从文档中的这一行示例中收集到这一点：
handleClick = (e) => {
this.props.setTimeout(this.toggle, 5000) // call the `toggle` function after 5000ms
}
但是，当我类似地实现它时，TypeScript会抱怨该属性不存在。这里(本质上)是我的代码。在评论中指出了这一错误：
import * as React f
浏览 0提问于2018-02-10得票数 0
我有以下即席组件为我的组件提供了firebase：
import React from 'react'
const FirebaseContext = React.createContext({})
export const withFirebase = <Props extends object>(
Component: React.ComponentType<Props>
): React.ComponentType<Props> =>
class WithFirebase extends React.Component
浏览 16提问于2019-11-03得票数 0
回答已采纳
2回答
我尝试使用TypeScript为无状态的、功能性的React组件指定默认属性，并使用以下代码：
import React from 'react'
interface Props {
readonly sid?: string,
}
const defaultProps: any = {
sid: '',
}
const ModalBackdrop: React.SFC<Props> = (props: Props): JSX.Element => {
const { sid } = props
return (
浏览 48提问于2019-03-26得票数 1
3回答
我有一个非常基本的有状态组件，在这里，我使用重组合将多个HOC添加到我的组件中(在我的示例中，我只使用一个来简化)。由于某种原因，打字稿给了我一个错误，我的道具进入我的组件。我怎样才能消除这个错误？
这是我的密码：
import * as React from 'react';
import { connect } from 'react-redux';
import { compose } from 'recompose';
interface IStoreState {
readonly sessionState: {
auth
浏览 0提问于2018-07-31得票数 5
回答已采纳
我试图在这里使用react选项卡( )在UI上创建选项卡。到目前为止，这是我的代码：
index.jsx：
import React from 'react';
import ReactDOM from 'react-dom';
import TabsApp from './TabsApp.jsx';
main();
function main() {
render(<TabsApp/>, document.getElementById('container'));
}
这是我的TabsApp.jsx：
浏览 1提问于2016-09-23得票数 0
我试图利用编译器中的TypeScript和@type/react，但是很难。我使用的是TypeScript版本2.3.4。
假设我有这样的代码：
interface TabbedViewProps {children?: Tab[]}
export class TabbedView extends React.Component<TabbedViewProps, undefined> {
render(): JSX.Element {
return <div>TabbedView</div>;
}
}
interface TabProps
浏览 17提问于2017-06-10得票数 90
1回答
我正在尝试使用阿波罗的React来获取数据并将数据传递给我的组件，但是我得到了一个错误：
Argument of type 'typeof BrandList' is not assignable to parameter of type
'CompositeComponent<{ data?: QueryProps | undefined; mutate?: MutationFunc<{}> | undefined; }>'.
Type 'typeof BrandList' is not assignable to t
浏览 0提问于2017-06-04得票数 2
回答已采纳
我一直在尝试在不破坏TypeScript类型系统规则的情况下，在React中创建一个抽象组件。根据React的类型，如果在组件的构造函数中设置了状态，则它必须是完整的(所有必需的属性都已分配)。一种选择是让子类设置整个状态，包括父类定义的值。为了避免可能导致的重复，我尝试这样做，以便子类可以将此信息传递给抽象类。这会导致一个Readonly错误，这对我来说意义不大。下面是我使用的代码：
import * as React from 'react';
function intersect<T1 extends Object, T2 extends Object>(o
浏览 0提问于2017-11-24得票数 3
我在React中使用typescript 2.3.4。我收到错误名称:错误名称:属性‘TS2339’在类型'Readonly<{ TS2339？：ReactNode；}> & Readonly<{}>‘上不存在。当我试图在一个子组件中声明该属性时，出现了这个错误。如何在子组件中正确引用该属性？
由于某种原因，代码不能在脚本运行器中执行。
任何帮助都是非常感谢的。
export interface person {
name: string;
age: number;
}
interface State {
personArr
浏览 3提问于2017-06-12得票数 26
回答已采纳
我试图将事件处理程序从父组件传递给子组件。关键是在用户单击子组件时更改父组件的状态。问题在于它引发了如下错误：
/*
(property) onClick: React.MouseEventHandler<Element>
Type '{ onClick: MouseEventHandler<Element>; }' is not assignable to type 'IntrinsicAttributes & Props'.
Property 'onClick' does not
浏览 10提问于2022-10-12得票数 0
回答已采纳
1回答
按照Rob Napier的，我可以为 /System/Library/CoreServices/Database Events.app设置生成的标头。我现在正在尝试使用脚本桥来执行等同于tell database "My Database"的功能。
我尝试通过脚本桥运行的相应AppleScript是：
tell application "Database Events"
tell database "My Database"
-- ...
end tell
end tell
但是我如何在脚本桥中做到这一点呢？
生成
浏览 8提问于2013-01-11得票数 0
回答已采纳
1回答
我们有具有某些属性的祖先类(例如，使用React)。
export interface AncestorProps<T> {
...
}
export class Ancestor<T> extends React.Component<AncestorProps<T>> {
}
如何正确覆盖子组件？
interface DescendentProps extends AncestorProps {
someFunction: () => void;
}
export class Descendent<
浏览 0提问于2018-10-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
