使用 React Typescript 的状态:属性 在类型 'IntrinsicAttributes & IntrinsicClassAttributes 上不存在
State using React Typescript: Property does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes
我是 React with Typescript 的新手,我收到一条错误消息 :
No overload matches this call. Overload 1 of 2, '(props:
Readonly<{}>): IndexPage', gave the following error.
Type '{ notes: { 1: { _id: number; title: string; body: string;
updatedAt: Date; }; }; }' is not assignable to type
'IntrinsicAttributes & IntrinsicClassAttributes &
Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Property 'notes' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{
children?: ReactNode; }>'. Overload 2 of 2, '(props: {}, context?:
any): IndexPage', gave the following error.
Type '{ notes: { 1: { _id: number; title: string; body: string; updatedAt: Date; }; }; }' is not assignable to type
'IntrinsicAttributes & IntrinsicClassAttributes &
Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Property 'notes' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{
children?: ReactNode; }>'.
**App.tsx**
//import statements
type Note={
notes: {
1: {
_id: number;
body:string;
title:string;
updatedAt: Date
}
} }
type State={notes: {[key:number]: Note} }
class App extends React.Component <State> {
state={
notes: {
1: {
_id:1,
title: "hello world",
body: "this is the body",
updatedAt:new Date()
}
}
}
render(){
return (
<div className="App">
<Nav/>
<Headers/>
<IndexPage notes = {this.state.notes}/>
</div>
);
}
}
export default App;
============================================= =========
Index.tsx:
import React from 'react';
export default class IndexPage extends React.Component{
render(){
const notes=Object.values(this.props.notes);
return(
<div>
<h1> posts</h1>
<h2> {notes[0].title}</h2>
</div>
)
}
}
您必须在组件上指定 Props 和 State 类型:
应用程序
type Note = {
_id: number,
title: string,
body: string,
updatedAt: Date
}
type Props = {/*props properties*/}
type State = {
notes: {[key:number]: Note}
}
class App extends React.Component<Props, State>{
state={
notes: {
1: {
_id:1,
title: "hello world",
body: "this is the body",
updatedAt:new Date()
}
}
}
render(){
return (
<div className="App">
<Nav/>
<Headers/>
<IndexPage notes = {this.state.notes}/>
</div>
);
}
}
export default App;
索引页
//You should extract Note in other file and import it on both components
type Note = {
_id: number,
title: string,
body: string,
updatedAt: Date
}
type Props = {
notes: {[key:number]: Note}
}
export default class IndexPage extends React.Component<Props>{
render(){
const notes=Object.values(this.props.notes);
return(
<div>
<h1> posts</h1>
<h2> {notes[0].title}</h2>
</div>
)
}
}
我是 React with Typescript 的新手,我收到一条错误消息 :
No overload matches this call. Overload 1 of 2, '(props: Readonly<{}>): IndexPage', gave the following error.
Type '{ notes: { 1: { _id: number; title: string; body: string; updatedAt: Date; }; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Property 'notes' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Overload 2 of 2, '(props: {}, context?: any): IndexPage', gave the following error. Type '{ notes: { 1: { _id: number; title: string; body: string; updatedAt: Date; }; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Property 'notes' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
**App.tsx**
//import statements
type Note={
notes: {
1: {
_id: number;
body:string;
title:string;
updatedAt: Date
}
} }
type State={notes: {[key:number]: Note} }
class App extends React.Component <State> {
state={
notes: {
1: {
_id:1,
title: "hello world",
body: "this is the body",
updatedAt:new Date()
}
}
}
render(){
return (
<div className="App">
<Nav/>
<Headers/>
<IndexPage notes = {this.state.notes}/>
</div>
);
}
}
export default App;
============================================= ========= Index.tsx:
import React from 'react';
export default class IndexPage extends React.Component{
render(){
const notes=Object.values(this.props.notes);
return(
<div>
<h1> posts</h1>
<h2> {notes[0].title}</h2>
</div>
)
}
}
您必须在组件上指定 Props 和 State 类型:
应用程序
type Note = {
_id: number,
title: string,
body: string,
updatedAt: Date
}
type Props = {/*props properties*/}
type State = {
notes: {[key:number]: Note}
}
class App extends React.Component<Props, State>{
state={
notes: {
1: {
_id:1,
title: "hello world",
body: "this is the body",
updatedAt:new Date()
}
}
}
render(){
return (
<div className="App">
<Nav/>
<Headers/>
<IndexPage notes = {this.state.notes}/>
</div>
);
}
}
export default App;
索引页
//You should extract Note in other file and import it on both components
type Note = {
_id: number,
title: string,
body: string,
updatedAt: Date
}
type Props = {
notes: {[key:number]: Note}
}
export default class IndexPage extends React.Component<Props>{
render(){
const notes=Object.values(this.props.notes);
return(
<div>
<h1> posts</h1>
<h2> {notes[0].title}</h2>
</div>
)
}
}