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

啦啦啦啦

发布于 2023-02-27 14:10:40

8820

发布于 2023-02-27 14:10:40

文章被收录于专栏：啦啦啦啦前端

写在前面：

本系列代码源码已经上传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 (
    <div
      style={{ width: '60%', margin: '0 auto', textAlign: 'center', border: '3px solid red' }}
    >
      <h2>我是父组件</h2>
      <h4>{parentValue}</h4>
      <button style={{ margin: '20px 0' }} onClick={() => { setParentValue('我触发父组件函数了，' + parentValue); }}>父组件按钮</button>
      <Child1 parentValue={parentValue} setParentValue={setParentValue}></Child1>
    </div>
  );
}

export default App;

子组件关键代码

import React, { useState } from 'react';


const Child1 = (props) => {

  return (
    <>
      <div style={{ width: '60%', margin: '30px auto', padding: '30px 5px', textAlign: 'center', border: '3px solid yellowgreen' }} >
        <h3>我是子组件1</h3>
        <div>子组件使用父组件的值：{props.parentValue}</div>
        <button style={{ margin: '20px 0' }} onClick={() => { props.setParentValue('我触发父组件函数了，子组件触发的哟~' + props.parentValue); }}>子组件使用父组件的函数</button>
      </div>
    </>
  )
};

export default Child1;

感谢看完！