props数据传输

父传子

以index（父）和app（子）为例
把index中username变量的值传送到app中
index文件:

//定义变量
const username = 'grace'
//定义app组件中的属性并传参
 <App username={username} />

app文件：

//ts需要先进行类型定义
interface Props {
  username:string;
}
//组件声明props类型
const App: React.FC<Props> = (props) => {
return (<h2>{props.username}</h2>)
}

ps：因为react脚手架自带了测试单元模块，所以如果是用脚手架创建的项目,App.test.tsx中render需要添加属性username

 render(<App username={''} />);

props深度注入
假如username需要传递给index的子组件的子组件，需要先传递给app（子组件），再由app采用相似的方法传递给子组件ShoppingCart（子组件的子组件）

<ShoppingCart username={props.username}/>

以此类推，可以进行多层深度注入，但是这种多层级的注入影响页面渲染，一般不推荐使用，跨组件数据渲染可以使用全局数据传输。