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>{
}