类型'IntrinsicAttributes & InferPropsInner‘上不存在属性'X’
是一个 TypeScript 错误信息。它表示在类型"IntrinsicAttributes & InferPropsInner"上不存在名为'X'的属性。
这个错误通常发生在使用React或其他基于TypeScript的框架时，当我们在组件中使用了一个不存在的属性时会出现。这个错误的原因可能是以下几种情况：
- 拼写错误：请检查属性名是否正确拼写，确保没有任何拼写错误。
- 属性不存在：确保你正在使用的属性在组件的props中是存在的，或者在父组件中正确地传递了这个属性。
- 类型定义错误：如果你使用了第三方库或自定义类型，可能是类型定义文件中的错误导致了这个问题。请确保你的类型定义文件是正确的，并且与实际使用的属性相匹配。
针对这个错误，我们可以通过以下步骤来解决：
- 检查拼写错误：仔细检查属性名的拼写，确保没有任何拼写错误。
- 检查属性是否存在：查看组件的props定义，确保你正在使用的属性在props中是存在的，并且在父组件中正确地传递了这个属性。
- 检查类型定义：如果你使用了第三方库或自定义类型，检查类型定义文件是否正确，并且与实际使用的属性相匹配。如果发现错误，可以尝试更新类型定义文件或与库的维护者联系以获取帮助。
总结起来，类型'IntrinsicAttributes & InferPropsInner‘上不存在属性'X’错误是由于使用了一个不存在的属性导致的。通过仔细检查拼写、确保属性存在以及检查类型定义，可以解决这个问题。
相关·内容
我试图将事件处理程序从父组件传递给子组件。关键是在用户单击子组件时更改父组件的状态。问题在于它引发了如下错误：
/*
(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
回答已采纳
我在Reactive原住民项目上使用NativeBase，当我使用Xcode在iPhone上运行应用程序时，TypeScript告诉我，NativeBase按钮类型上不存在属性"onPress“。
为了简化这里的事情，我的代码是：
import { Button } from 'native-base';
...
<Button
variant="ghost"
colorScheme="blueGray"
onPress={() => {
console.log('Ok')
}}
>
浏览 26提问于2021-12-27得票数 3
回答已采纳
2回答
我正在创建一个名为text的React组件，它允许更改将要呈现的标记。
export interface TextProps extends HTMLAttributes<HTMLElement> {
children: ReactNode;
as?: React.ElementType;
}
问题是我尝试使用这样的time元素：
<Text as="time" dateTime="2018-07-07">
July 7
</Text>
但是TS编译器抱怨Property 'dateTime' do
浏览 14提问于2021-02-15得票数 0
回答已采纳
我们已经购买了一个反应主题，意图使用它的组件在我们的web应用程序，我们结束了一些问题，让他们转过来，我们得到了解决。但是，我们现在遇到了类型问题。
我认为这里的问题是，类型记录不喜欢道具没有定义的类型，并且默认为IntrinsicAttributes。我想不用修改就能使用这些组件。
错误：
(TS) Property 'content' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Card> & Readonly<{ children?:
浏览 0提问于2018-03-15得票数 0
我正在使用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中的一个按钮中添加一个数据测试id属性，但是类型记录对此很生气。如何将此属性添加到所有材料组件中？
import { Button } from '@material-ui/core'
<Button dataTestId='my-test-id'>
Click Me!
</Button>
文本错误：
TS2769: No overload matches this call.
Overload 1 of 3, '(props: { href: string; } & { children?:
浏览 3提问于2021-03-17得票数 4
回答已采纳
我完全按照react-bootstrap文档中所示的方式使用Modal组件，但得到了错误Property 'show' does not exist on type 'IntrinsicAttributes & [...]' <Modal show={props.showModal} onHide={props.handleCloseModal}>
<Modal.Header closeButton>
<Modal.Title>Seleccionaste la opcion:</Mo
浏览 148提问于2020-10-02得票数 2
我正在尝试将一个函数传递给子组件，但我得到了许多打字错误... parent.tsx import React from 'react';
import {Child} from './child';
const Parent: React.FC = () => {
function fire() {
console.log('fire')
}
return (
<Child fire={fire}/>
// ^___ error here!
浏览 35提问于2019-08-30得票数 3
回答已采纳
1回答
<DatePicker
value={props.openDate}
onChange={props.handleInput}
renderInput={(params) => (
<TextField name="openDate" {...params} />
)}
/>
我不能从材料用户界面日期选择器中选择日期。如果在datepciker中指定name属性，则会引发错误。
类型{ name: string；value: any；onChange: any；renderInput：(params: TextFieldProps) =
浏览 1提问于2022-09-28得票数 0
2回答
我正在尝试编写一个通用的React组件，它需要两种类型(IFoo或IBar)中的一种属性，以及一个接受所选类型属性的组件。 为什么下面的方法不起作用？ Playground import React from 'react';
interface IFoo {
x: string;
}
interface IBar {
x: number;
}
const foo: React.FunctionComponent<IFoo> = (props: IFoo) => {
console.log("hello from foo!"
浏览 22提问于2020-01-26得票数 1
回答已采纳
我知道这已经被详细讨论过了，但没有其他解决方案似乎有效，或者我在实现它们时失败了。
我是一个全新的typescript新手，并且有以下几点：
import faker from "faker";
import React from "react";
import Index from "../components/Index";
import List from "../components/List";
interface Props {
departments: [
{
id: number;
浏览 23提问于2020-05-28得票数 1
回答已采纳
我正在开发一个组件，该组件包含一个子道具，它接受一个img元素+另一个道具。但是，当我继续使用组件并传递所有支持时，我会收到以下错误：
类型'Pick<ImgHTMLAttributes‘没有与'IntrinsicAttributes’、‘src’>、‘s(2559) App.tsx(5、3)相同的属性:预期类型来自在’IntrinsicAttributes& Props‘类型上声明的属性’子类型‘。
下面是我的代码()的一个示例：
type Props = {
children: Pick<ImgHTMLAttributes<HTM
浏览 2提问于2021-10-29得票数 5
回答已采纳
3回答
我有一个带有keystone.js后端和graphql的react应用程序
我在keystones.js中有一个产品列表和一个简单的graphql查询
import gql from "graphql-tag";
export const ALL_PRODUCTS_QUERY = gql`
query ProductData{
allProducts{
id
price
description
name
}
}
`
我正在使用阿波罗编
浏览 1提问于2021-12-30得票数 5
回答已采纳
我有一个接受客户端属性的可共享的nextjs组件 const ClientInfo: NextPage = ({ client }: any) => {
return (
<div> 在我的list组件中，我使用该组件作为标记，如下所示 {
selectedClient && <div className={styles.clientDetail}>
<ClientInfo client={selectedClient}></ClientInfo>
</div>
}
浏览 31提问于2021-08-25得票数 0
回答已采纳
。
下面是我的输入组件：
import styled from 'styled-components'
import React, { forwardRef } from 'react'
type Props = {
err: boolean
maxWidth: string
}
export const Input = forwardRef<HTMLInputElement, Props>(({ ...rest }, ref) => {
return <StyledInput {...rest} ref={ref} /&
浏览 39提问于2020-03-13得票数 2
现在，我面临保护路由配置的小问题。我使用的反应-路由器5，有安装类型等。
错误:类型'{ path: string；component：() =>元素；}‘不能分配到键入'IntrinsicAttributes & Pick<any，从不>’。属性'path‘在'IntrinsicAttributes & Pick<any，从不>’..ts(2322)类型上不存在
App.tsx组件：
function App(props: any) {
const { i18n } = useTranslation();
浏览 6提问于2020-10-04得票数 1
编辑：这是4.8.x类型中的一个错误，升级到4.9.0+以解决问题。
在版本4.8.0上，以下代码编译并运行良好：
<DialogContent>
{/* use a span so we can nest div, p, etc. */}
<DialogContentText component="span">
{confirmContent}
</DialogContentText>
</DialogContent>
升级到4.8.1
浏览 5提问于2019-12-27得票数 2
回答已采纳
使用React JS，我可以这样做，将函数handleClick作为参数从父组件传递给子组件： 父级： const testData = {
id: 1,
title: 'Tesco'
};
const Home = () => {
const handleClick = () => {
//do something
}
return (
<>
<Card id={testData.id} title={testData.title}, handleClick={handleClick}
浏览 42提问于2020-10-06得票数 0
回答已采纳
2回答
我有一个简单的通用反应组件，我并不总是知道我将使用哪种元素类型或道具，并且不想为每个潜在的支柱设置一个接口。
使用TS v2.9。
在这种情况下，我使用的事实不应该是相关的。
import React, { StatelessComponent as SC } from "react";
interface IGenComponentProps {
/**
* Component type
*/
ComponentName: string;
/**
* Test Id used for automation testing
*/
浏览 1提问于2019-02-27得票数 2
回答已采纳
2回答
TS错误-创建自定义反应警报组件
、、、、
我正在尝试创建一个自定义的警告组件，通过简单地将文本和严重性作为参数传入，我可以调用不同的页面。我试着用这个：
export default function CustomAlert(severity: string, text: string){
<Alert style={{width:'50%'}} severity={severity}> {text}</Alert>
}
但是我在第一个严重的单词severity={severity}上一直有一个错误，那就是：
Type 'string' is not assignable
浏览 1提问于2020-03-15得票数 3
回答已采纳
我正在做一个小的家庭项目，以提高我在TS的技能。从服务器获取数据，一切都很好，帖子开始显示没有错误，但后来我决定将代码和地图放在一个单独的组件中，ts立即给了我一个错误： Type '{ posts: IPost[]; }' is not assignable to type 'IntrinsicAttributes & IPost[] & { children?: ReactNode; }'.
Property 'posts' does not exist on type 'IntrinsicAttributes &a
浏览 1103提问于2021-11-08得票数 0
回答已采纳
在我的nextjs-app中，我有Navbar-component，在这里，我将菜单项作为道具传递：
<Navbar navitems={navigationItems} />
navigationItems是一个对象数组。
然后，在Navbar-component中，我得到了以下内容：
export interface INavBarItem {
id: string;
text: string;
path: {
slug: string;
};
}
export type INavBar = INavBarItem[];
const Nav
浏览 6提问于2022-10-25得票数 -1
如下所示，将innerRef转发到样式组件会在typescript中显示以下类型错误： interface MenuProps {
isOpen: boolean
}
const BaseMenu = styled.ul<MenuProps>`
padding: 0;
/* ... styles ... */
${({ isOpen }) =>
!isOpen &&
css`
border: none;
`}
`
const Menu = React.forwardRef((props, ref) =&
浏览 25提问于2021-09-06得票数 0
回答已采纳
2回答
如果我有一个部件，
import { FC } from 'react';
interface Props {
name: string;
}
const Home: FC<Props> = ({ name, ...rest }) => {
return (
<>
<div>{name}</div>
<input {...rest} type="text" />
</>
);
};
export default Home;
试着
浏览 1提问于2022-01-27得票数 0
回答已采纳
4回答
我有我自己的Form组件，我想让它与Parent Component分离。
const Form: React.FC<any> = ({ children, handleFormSubmit }) => (
<form onSubmit={handleFormSubmit}>{children}</form>
);
Parent Component
const ParentComponent = () => {
...
const handleFormSubmit = (event: React.FormEvent<HTMLFormE
浏览 0提问于2019-05-27得票数 24
这是我的布局：
export default function Layout(children:any) {
return (
<div className={`${styles.FixedBody} bg-gray-200`}>
<main className={styles.FixedMain}>
<LoginButton />
{ children }
</main>
<footer>
<FooterNavigation /&
浏览 2提问于2020-11-06得票数 10
回答已采纳
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
我将.js文件更改为类型记录文件.tsx。我在文件中定义了以下函数：
function MyCard(param1: ObjectDto, toggleFunction: any) {}
我在另一个.tsx文件中使用这个函数，如下所示
<MyCard param1={param1Value} toggleFunction={myToggleFunction} />
但我得到了以下错误：
键入“{ param1: ObjectDto；toggleFunction：(index: any) => void；}”不能指定键入“IntrinsicAttributes&Obj
浏览 0提问于2019-03-09得票数 45
回答已采纳
1回答
react: "^16.12.0",
react-dom: "^16.12.0",
@types/react: "^16.9.49",
typescript: "^4.0.3"
在尝试将道具传递给组件时，如何在以下代码中解决上述类型问题？
pages/item.tsx
import SingleItem from '../components/SingleItem';
import { withRouter } from "next/router";
const Item = p
浏览 1提问于2020-09-24得票数 0
我在React和typescript中使用插槽系统。问题是我找不到一个包含slot作为属性的接口，所以我从我的typescript检查器中得到一个错误： Property 'slot' does not exist on type 'IntrinsicAttributes & IStockProps & { children?: ReactNode; }'.
浏览 14提问于2019-09-30得票数 1
回答已采纳
嗨，我已经尝试找出这个错误的解决方案，但没有成功。
我正在使用这种类型的错误。
键入“{ mailData: mailSendProps；}”不能指定键入“IntrinsicAttributes&{子代？：ReactNode；}”。属性'mailData‘在类型'IntrinsicAttributes &{子？：ReactNode；}’上不存在。
我的代码是这样的
<SocialShare mailData={_mailData} />
const _mailData:mailSendProps = {
url:_seoData.actua
浏览 8提问于2022-03-22得票数 1
回答已采纳
我不确定为什么我会得到这个错误： TypeScript error in /home/amanuel2/tutorial/go/react-go/src/frontend/src/App.tsx(34,15):
Type '{ props: string[]; }' is not assignable to type 'IntrinsicAttributes & string[]'.
Property 'props' does not exist on type 'IntrinsicAttributes & stri
浏览 207提问于2020-12-13得票数 3
回答已采纳
1回答
我编写了一个特殊的函数，我无法正确地输入(这是预料中的，因为我是TypeScript初学者，甚至是一个类型的初学者)。以下是功能：
const withLayout = (LayoutComponent, layoutProps = {}) => (WrappedComponent) => {
return function WithLayout(props) {
return (
<LayoutComponent {...layoutProps}>
<WrappedComponent {...props} />
浏览 2提问于2021-03-15得票数 0
回答已采纳
我有一个类型集合，所有类型都是从基接口扩展而来的： interface BaseType {
id: number;
titleText: string;
}
export enum ComponentType {
AUDIO = 'type_audio',
ARTICLE = 'type_article',
BASIC = 'type_basic',
DOWNLOAD = 'type_download',
LINK = 'type_link',
QUOTE = 'typ
浏览 40提问于2021-06-23得票数 0
回答已采纳
我做了一个简单的组件：
const CloseButton = ({ onClick }: { onClick: MouseEventHandler }) => {
const classes = useStyles();
return <CloseIcon className={classes.closeButtonStyles} onClick={onClick} />;
};
export default CloseButton;
我可以称之为：
<CloseButton onClick={handleClose} />
这个很好用。
但是当我添加
浏览 2提问于2020-06-05得票数 0
回答已采纳
我想在Flatlist中实现下拉选项，我使用了React本机弹出菜单，在App.tsx中我已经将入口点声明为MenuProvider。我得到了这个错误。
类型'{子类: Element[]；}‘与类型'IntrinsicAttributes &IntrinsicAttributes any、any>> & Readonly<...> react原生弹出菜单MenuProvider类型记录没有共同之处。
浏览 1提问于2022-06-01得票数 0
我有反应打字记录svgr。一切看起来都很好。
{
test: /\.svg$/,
use: ['@svgr/webpack'],
},
import Logo from 'assets/icons/logo.svg';
<Logo className={iconClassName} />;
不喜欢这样。
TS2322: Type '{ className: string；}‘不能分配到键入'IntrinsicAttributes’。类型'IntrinsicAttributes‘上不存在其他属性'classNa
浏览 5提问于2021-03-03得票数 4
如何键入动态标记，以便与TypeScript作出反应？鉴于这一守则：
interface CompProps {
tag: string;
}
const MyComponent: React.FunctionComponent<CompProps> = ({
tag = "div",
children
}) => {
const Wrapper = tag;
return <Wrapper>{children}</Wrapper>;
};
我得到了这个错误：
类型'{子类: ReactNode；}‘与
浏览 1提问于2019-05-03得票数 26
我是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
回答已采纳
当我使用时，我有一个相当简单的需求来添加和传播一些css对象。所以所有的东西都是内联的。所以我认为主要的问题是"& > div"
然而，正如您从一个TS错误中看到的那样，css也被标记了，但遗憾的是，我想不出一个好的理由。
头像/index.tsx
<Image
{...props}
src={src}
objectFit="cover"
data-testid="avatar"
styles={{
width: `${width}px`,
height: `${height}px`,
浏览 0提问于2021-01-12得票数 1
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
2回答
我想创建一个组件来处理具有相同属性/逻辑的多个HTML元素。 import React from 'react';
import styled from 'styled-components';
interface GridProps {
htmlElement: 'div' | 'main' | 'header',
}
const GridFactory = (props: GridProps) => {
switch (props.htmlElement) {
case 'h
浏览 28提问于2020-08-16得票数 3
回答已采纳
摘要：
类型记录在通过标准propName={propValue}传递道具时会出现错误，但在使用扩展道具{...{propName: propValue}}时不会出现错误。
澄清一下:我知道如何解决这个问题。我可以将它显式地添加到IconButtonProps类型中；我也可以添加& React.HTMLAttributes<HTMLButtonElement>，这样我就不必迭代我想要通过的所有按钮道具；我也可以在任何地方使用扩展道具(这是我90%的时间都要做的)。
然而，这两个组件似乎应该是相同的。，我想了解为什么这两种传递道具的方式在打字稿中表现不同。
代码示例
imp
浏览 4提问于2021-04-06得票数 1
回答已采纳
我正在制作一个自定义链接组件，并将target="_blank"和rel="noreferrer"作为道具传递，并使用分配给<a>的{...props}。
const ExternalLinkTwo: React.FC<{
href: string;
children: ReactNode;
}> = ({ href, children, ...props }) => (
<a href={href} {...props}>
{children}
</a>
);
export def
浏览 2提问于2022-04-07得票数 1
回答已采纳
2回答
在MUI +样式组件中使用类型记录，并且由于类型错误…，您必须将道具直接传递给MUI元素。。
const Index = () => {
return (
<StyledButton
variant="contained"
>
Hello World
</StyledButton>
)}
const StyledButton = styled(Button)`
background: red;
color: white;
`;
但是，这将导致以下错误：
类型&
浏览 0提问于2019-04-10得票数 5
使用以下代码检查React HOC函数中的组件参数类型失败： import * as React from 'react';
interface FooProps {
foo: string;
bar: string;
}
function withProps<P extends FooProps>(
Comp: React.ComponentType<P>
) {
return class extends React.Component {
render() {
return <Comp foo="
浏览 27提问于2019-01-18得票数 0
编译器说 const Form = (
submit: (email: string, password: string) => void, message:string)
{
return (//omit//)
}
const submitC = (
userName: string,
password: string
) => {
props.submitC( email, pass);
};
<Form
submit={submitC}
message={
浏览 17提问于2020-01-20得票数 0
我需要做复选框列表组件。我正在从另一个文件导入复选框组件，并在我的选项函数中添加它。通过选项函数映射并显示复选框组件列表的正确方法是什么？目前，我的列表不起作用，我得到了一些错误:找不到名称'value‘。属性“禁用”和“选中”在“选项”类型上不存在。“类型”{ =>：IntrinsicAttributes；key: string；key: string；label: string；禁用: any；IntrinsicAttributes：() => void；}‘不能指定键入'IntrinsicAttributes & OptionProps’。在'
浏览 4提问于2022-08-25得票数 0
回答已采纳
当使用自定义的JSX杂注时，允许扩展DOM元素属性吗？
类似于情感和样式-组件如何使用一个css道具和管理逻辑在他们的jsx语用。我也想这样做，但是可以通过泛型类型配置属性吗？
因此，例如：
// @jsx jsx
import { jsx } from 'my-lib';
...
<button<{ primary: boolean }> css={styles} primary={primary}>
Hello world
</button>
我当前的类型定义如下所示：
interface CustomAttributes {
浏览 5提问于2020-10-03得票数 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
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
