TS開發React語法問題-如何聲明子組件的屬性

React 開發的語法問題-聲明子組件屬性的問題

1、自定義的React組件，父組件引用子組件後，給子組件傳屬性時，總是出現警告，說該子組件不存在該屬性

// 子組件
class MyComp extends React.Component {
}

// 父組件
class parentComp extends Recat.Component {
	render(){
	const tmpSrc = '/abc/abc'
	return (<><MyComp src={tmpSrc}/></>)
	}
}

< MyComp /> 這時，總是出現下劃線警告，雖然可以正常運行，但說明出了TS不推薦的語法問題
本質是，還有未考慮到的代碼問題，或對react組件的使用不熟悉，瞭解得不夠透徹，提示信息如下

(alias) class MyComp
import MyComp
不能將類型“{ src: string; }”分配給類型“IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{}> & Readonly<{ children?: ReactNode; }>”。
  類型“IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{}> & Readonly<{ children?: ReactNode; }>”上不存在屬性“src”。ts(2322)

這個問題主要因爲子組件中，未聲明子組件所需要用的屬性。同時，子組件中使用const { myData} = this.props 獲取父傳過來的屬性時，總是提示警告 myData。都是因爲子組件未聲明所需要的屬性。

如何聲明組件的屬性呢？

這時要介紹到TS的泛型，TS的泛型是什麼這裏不展開，上面的問題怎麼解決呢？只需要對在繼承React.Component時，聲明泛型即可，代碼如下

// 1.使用成能any 類型
class MyComp extends React.Component<any>{
}

// 2.使用interface完全聲明定義屬性類型
interface MyProps {
	src:string; // 必要屬性
	name? : string; //可選屬性
	readonly id: string; // 只讀屬性
}

class MyComp extends react.Component<MyProps>{
}