类型“{}”不可分配给类型“ IntrinsicAttritribute & IntrinsicClassAttritribute”

我目前正在做一个简单的反应应用程序。 这是我的 index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(
<App />,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();

这是我的 app.tsx

    import * as React from 'react';
import SearchBar from '../containers/price_search_bar';


interface Props {
term: string;
}


class App extends React.Component<Props> {


// tslint:disable-next-line:typedef
constructor(props) {
super(props);
this.state = {term: '' };
}


render() {
return (
<div className="App">
<div className="App-header">
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
this is my application.
</p>
<div>
<form>
<SearchBar term={this.props.term} />
</form>
</div>
</div>
);
}
}


export default App;

还有我的搜索栏容器:

    import * as React from 'react';


interface Props {
term: string;
}


// tslint:disable-next-line:no-any
class SearchBar extends  React.Component<Props> {


// tslint:disable-next-line:typedef
constructor(props) {
super(props);
this.state = { term: '' };
}


public render() {
return(
<form>
<input
placeholder="search for base budget"
className="form-control"
value={this.props.term}
/>
<span className="input-group-btn" >
<button type="submit" className="btn btn-secondary" >
Submit
</button>
</span>


</form>
);
}
}


export default SearchBar;

最后是 tsconfig.json:

{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": false,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"node_modules/@types"
],
"noUnusedLocals": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}

我不断得到不同的错误后，错误和每当我修复一个错误，另一个出现，我不知道我做了什么，使这样的行为。 这是最新的错误:

./src/index.tsx
(7,3): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<App> & Readonly<{ children?: ReactNode; }> & Reado...'.
Type '{}' is not assignable to type 'Readonly<Props>'.
Property 'term' is missing in type '{}'.

我试图修改我的 tsconfig.json修复它，但同样的错误仍然出现，我做错了什么，为什么打字机是这样的痛苦。我是非常新的，通过这个例子，我试图了解反应是如何一起工作的。

316590 次浏览
小开

这里的问题不在于 tslint 设置:

interface SearchBarProps {
term: string;
optionalArgument?: string;
}


interface SearchBarState{
something: number;
}


class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
constructor(props: SearchBarProps){
super(props);


this.state = {
something: 23
};
}


render() {
const {something} = this.state;
return (
<div>{something}</div>
)
}
}

在 class SearchBar extends React.Component<SearchBarProps, SearchBarState> {中，SearchBarProps和 SearchBarState分别表示组件 SearchBar的预期支柱类型和状态类型。在使用类型脚本时，必须提供 propType 和 stateType。
你可以通过使用关键字 any来避免给出类型，但是我强烈建议你不要走这条“邪恶”的道路，如果你真的想利用类型脚本的优势。在您的情况下，似乎您没有指定状态的类型并使用它，修复将解决这个问题。< br >

编辑1
在接口 SearchBarProps中，optionalArgument成为一个可选参数，因为我们在它前面添加了一个问号 ?，所以即使没有显式地传递 optionalArgument，<SearchBar term='some term' />也不会显示任何错误。
希望这能解决你的问题！

小开

只是遇到了同样的问题。

在 App 类的 Prop 接口上定义了名为 term 的成员，但是在创建 App 元素时没有提供值。

试试以下方法:

ReactDOM.render(<App term="Foo" />, document.getElementById('root') as HTMLElement);
小开

我也面临同样的问题。添加以下代码来处理. tsx 组件。

export interface Props {
term: string;
}

或者

export type Props = {
term ?: string;
}

我不知道确切的原因，但我认为类型标志编译阶段的类型错误。如果对你有用就告诉我。

小开
最佳答案

通过声明一个完全传递给组件的对象，我解决了许多“ 不能赋值给类型“ IntrinsicAttritribute & IntrinsicClassAttritribute””类型的错误(微软终止发行)。

在 OP 的例子中，不要使用 term={this.props.term}，而是使用 {...searchBarProps}使其工作:

render() {
const searchBarProps = { // make sure all required component's inputs/Props keys&types match
term: this.props.term
}
return (
<div className="App">
...
<div>
<form>
<SearchBar {...searchBarProps} />
</form>
</div>
</div>
);
}
小开

问题是你不能导出界面，你应该总是导出界面道具，所以:

export interface Props {
term: string;
}

就是解决办法。

小开

您所需要的只是正确地声明组件类型以包含道具类型:

interface IMyProps {
myValue: boolean,
}


const MyComponent: React.FC<IMyProps> = (props: IMyProps) => {
...
}


export default MyComponent;

然后你可以把它用作:

import MyComponent from '../MyComponent';


...


return <MyComponent myValue={true} />

瞧，打印出来了。好的一面是，类型脚本现在只检查是否传递了它们在道具界面中实际存在的参数(可以防止输入错误等)。

对于标准组件来说，它类似于(Swapnill 的例子中已经有的) :

class MyComponent extends React.Component<IMyProps, IMyState>{
constructor(props: IMyProps){}
}
export default MyComponent;
小开

我对此并不感到自豪，但是，考虑到本帖中的其他解决方案，这似乎是足够公平的。

这个例子展示了一个自定义版本的 @react-native-community/slider，它具有一些默认属性，但是能够从外部接收(和覆盖) :

function CustomSlider(props: SliderProps) {
return (
<Slider
style=\{\{ width: '100%', height: 40, marginTop: 12 }}
minimumValue={0}
minimumTrackTintColor="#000000"
maximumTrackTintColor="#000000"
{...(props as any)}
/>
);
}
小开

我一直回到这里，因为 Volar 在我的 Vue 3组件中提出了类似的错误。解决方案总是返回和空的道具对象，因为我的组件模板有它方便，但我没有使用它。

使用该组件时:

<template>
<div>
<MyComponent/> <!-- Squiggly error here -->
</div>
</template>

组成部分:

export default defineComponent({
name: 'MyComponent',
components: {},
props: {}, // Remove this
setup() {
return {};
},
});
小开

我知道我的回答有点跑题，但是在 Vue3应用程序中，我可以通过为组件分配道具属性来重现这个错误，即使没有传递道具:

export default defineComponent({ props:{} .... })

只要删除道具属性的编译器不再抱怨。

小开

如果你像我一样盲目，你可能会遇到以下情况。
而不是:

interface TimelineProps {
width: number;
}


const Timeline: FC = (props: TimelineProps) => {
...

做:

const Timeline: FC<TimelineProps> = (props: TimelineProps) => {
^^^
小开

对于函数组件，这种语法在没有 React.FC 样板的情况下解决了这个错误:

interface FooProps {
foo: FooType
}


function FooComponent({ foo }: FooProps): ReactElement {
...
}
小开

对于组件，这可能是因为您像下面这样编写了组件:

    <ClearButton
text={"Clear board"}
isAnimationInProgress={isAnimationInProgress}
callSetOptionMethod={clearBoard}
>
// empty space here
</ClearButton>

而不是这样:

    <ClearButton
text={"Clear board"}
isAnimationInProgress={isAnimationInProgress}
callSetOptionMethod={clearBoard}
></ClearButton>
小开

对我来说，有效的方法是将子组件类型从 React.FC 改为 JSX.Element

之前(警告)

const Component: React.FC = () => {

之后(没有警告)

const Component = (): JSX.Element => {
小开

只需要像{ ... searchval }那样展开传递道具。 在组件中使用道具并分配类型原始类型的 searchval。这应该可以工作


提交答案