react函数式组件传值之父传子
Posted 大前端教程
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react函数式组件传值之父传子相关的知识,希望对你有一定的参考价值。
具体案例
案例主要实现一个简单的父组件Home向子组件Child传递count值,子组件通过props拿到此值并渲染出来。
父组件:home.tsx
import React, { useState } from 'react';
import './index.less';
import Child from './component/child';
const Home: React.FC = () => {
const [count, setCount] = useState<number>(0);
return (
<div className="home-wrap">
<p>当前数字:{count}</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
数字递增
</button>
<Child count={count} />
</div>
);
};
export default Home;
子组件:child.tsx
import React from 'react';
type selfProps = {
count: number;
};
const Child: React.FC<selfProps> = (props) => {
const { count } = props; //解构赋值
return (
<div className="child-wrap">
<p>子组件</p>
<p>从父组件传下来的数字是:{count}</p>
</div>
);
};
export default Child;
效果展示
END
以上是关于react函数式组件传值之父传子的主要内容,如果未能解决你的问题,请参考以下文章