react子父组件相互通信传值系列之——父组件传值与函数给子组

写在前面：

本系列代码源码已经上传github，大家可以随意下载，后面会给上视频讲解辅助，帮助大家更加融会贯通！

源码地址：JACK-ZHANG-coming/react-demo-project: 用于存放一些react相关的基础例子； (github.com)

本文作为本人学习总结之用，同时分享给大家，如果觉得这些内容有对你也有用的话，就请点个赞吧~ 谢谢~

因为个人技术有限，如果有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！

个人前端博客网站：https://zhangqiang.hk.cn

欢迎加入博主的前端学习qq交流群：706947563，专注前端开发，共同学习进步！

本系列你将能学到：

• 父组件传值与函数给子组件，在子组件可使用父组件的值与函数；
• 子组件传值与函数给父组件，在父组件里面可使用子组件里面的值与函数；
• 子组件传值与函数给子组件，在子组件里面可使用另一个子组件的值与函数；

---

父组件传值与函数给子组件，在子组件可使用父组件的值与函数

• 主要是通过react三大属性之一props来进行，下面开始上代码：

父组件关键代码

import React, { useState } from 'react';
import Child1 from './components/Child1/index';
​
const App = () => {
  const [parentValue, setParentValue] = useState('我是父组件的值-');
​
  return (
    

      
我是父组件
      
{parentValue}
       { setParentValue('我触发父组件函数了，' + parentValue); }}>父组件按钮
      
    
  );
}
​
export default App;
​

子组件关键代码

import React, { useState } from 'react';
​
​
const Child1 = (props) => {
​
  return (
    <>
      

        
我是子组件1
        
子组件使用父组件的值：{props.parentValue}
         { props.setParentValue('我触发父组件函数了，子组件触发的哟~' + props.parentValue); }}>子组件使用父组件的函数
      
    
  )
};
​
export default Child1;

---

感谢看完！

后面两种传值方式会尽快更新！