【React】10、react父子组件传值(通信)

     阅读:47

👏欢迎来到我的React系列文章
🍭本系列文章从React入门开始,涵盖了React的一切基础,属于是从零开始的一个系列
🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界
🍭持续更新中~希望大家能够喜欢,系列文章👉React–从基础到实战
🌈博客主页👉codeMak1r的博客
👉关注✨点赞👍收藏📂

  1. 🔥React入门与概览(JSX语法)
  2. 🔥面向组件编程——组件实例的三大核心属性state、props和refs超详解
  3. 🔥受控组件与非受控组件(vue和react的双向绑定分别是怎么实现的?)
  4. 🔥React函数的柯里化(什么?这玩意儿不仅能装x,还能优化代码?)
  5. 🔥四行代码让我的cpu跑上90度——走进组件生命周期
  6. 🔥图文详解react组件生命周期——React v16.8
  7. 🔥react新生命周期图文详解——最新版
  8. 🔥react-getSnapshotBeforeUpdate()生命周期函数详解
  9. 🔥使用create-react-app(CRA)创建react项目
  10. 🔥react父子组件传值(通信)(👈本文)

在这里插入图片描述

1、🍒父组件向子组件传值

在这里插入图片描述

在父组件中定义子组件,直接往子组件的标签中放数据,子组件可以在props中拿到。

在这里插入图片描述

代码实现

<script type="text/babel">
	// 定义父组件Father
    class Father extends React.Component {
      state = {
        data: [{ id: '001', name: 'codeMak1r', handsome: true }]
      }
      render() {
        return (
          <div>
            <div style={{ color: 'red', border: '1px solid skyblue', width: '120px' }}>
            我是Father组件</div>
            // 父组件的state中的data传给子组件
            <Son data={this.state.data} />
          </div>
        );
      }
    }
	
	// 定义子组件Son
    class Son extends React.Component {
      render() {
      // 从props中拿到父组件传递来的数据
        const { data } = this.props
        console.log(data)
        return (
          <div style={{ color: 'skyblue', border: '1px solid orange', width: '400px' }}>
            <div>我是Son组件</div>
            <ul>
              父组件传递给我的数据是:
              {
                data.map((data) => {
                  return <li key={data.id}>
                    姓名:{data.name}ID: {data.id},帅吗?: {data.handsome ? '当然帅!' : '不帅...'}
                  </li>
                })
              }
            </ul>
          </div>
        );
      }
    }

    ReactDOM.render(<Father />, document.getElementById('root'))
  </script>

2、🍎子组件向父组件传值

在这里插入图片描述

在父组件中实现一个自定义方法,传递给子组件的props,用这个自定义方法监听子组件的改变(类似Vue中的$emit语法糖)最终拿到子组件的值。

在这里插入图片描述

代码实现

<script type="text/babel">
	// 定义父组件Father
    class Father extends React.Component {
   	  // 初始化状态
      state = {
        Father_blog: ''
      }
	  // 实现自定义方法seliver(),监听子组件,接受子组件的blog属性
      seliver = (blog) => {
        this.setState({ Father_blog: blog });
      }

      render() {
        return (
          <div>
            <div style={{ color: 'red', border: '1px solid skyblue', width: '400px' }}>
              <div>我是Father组件</div>
              这是子组件传递给我的数据:{this.state.Father_blog}
            </div>
            // 向子组件传递用以监听的自定义方法
            <Son seliver={this.seliver} />
          </div>
        );
      }
    }

    class Son extends React.Component {
    // 初始化状态
      state = {
        blog: 'codeMak1r'
      }
      
      handleData = () => {
        const { blog } = this.state
        // 调用父组件传递来的自定义方法seliver(),将blog属性传递给父组件
        this.props.seliver(blog)
      }

      render() {
        return (
          <div style={{ color: 'skyblue', border: '1px solid orange', width: '400px' }}>
            <div>我是Son组件</div>
            <button onClick={this.handleData}>点我给父组件传递数据</button>
          </div>
        );
      }
    }

    ReactDOM.render(<Father />, document.getElementById('root'))
  </script>

3、🍇总结

🍒父传子:直接在子组件标签中传递;子组件在props中接收
🍎子传父:父组件实现一个自定义方法,监听子组件传递过来的参数;子组件在props中向这个自定义方法传递数据给父组件。

在React中父子组件的传值是必须要掌握的,react也给出了很多种组件通信的方式,比如:👬兄弟组件通信,订阅消息,redux等等…本文目前只介绍了父子组件之间的通信方式,后续会在系列专栏中更新更多的组件通信方式以及更多优质的React文章,详情请看专栏(React–从基础到实战)~😊😊

冰冻三尺非一日之寒,学习也是一个持续发力的过程💪💪,希望大家能够在自己的道路上披荆斩棘!

GO WARRIORS!!

在这里插入图片描述
回见~