react学习----函数式父子组件传参

最新推荐文章于 2024-07-10 16:21:59 发布

겐호 3

最新推荐文章于 2024-07-10 16:21:59 发布

阅读量661

点赞数

文章标签： react.js 学习前端

本文链接：https://blog.csdn.net/long321041080/article/details/131042387

版权

该文章展示了在React中如何进行组件间的通信，包括父组件向子组件传递数据使用`forwardRef`，以及子组件向父组件传递数据利用回调函数。例子详细说明了`useState`钩子和`forwardRef`在实际场景中的应用。

摘要由CSDN通过智能技术生成

一：父传子

函数式传参：子组件使用forwardRef

父组件：

import { Footer } from './components/Footer';
import './App.css';

function App() {
  let list = [
    1, 2, 3, 4, 5, 6, 7, 8
  ]
  return (
    <div className="App">
      <Footer data={list} />
    </div>
  )
}

export default App;

子组件：

import { forwardRef } from "react"

export const Footer = forwardRef((props, ref) => {
  const text = '底部区域'
  return (
    <div>
      <p>{text}</p>
      <ul>
        {props.data.map(item => {
          return <li>{item}</li>
        })}
      </ul>
    </div>
  )
})

二：子传父

父组件：

import { Footer } from './components/Footer';
import './App.css';
import { useState } from 'react';

function App() {
  const [num, setNum] = useState(0)
  const changeCount = (val) => {
    val += num
    setNum(val)
  }
  return (
    <div className="App">
      <p>子组件的数据{num}</p>
      <Footer changeNum={changeCount} />
    </div>
  );
}

export default App

子组件：

import { forwardRef } from "react"

export const Footer = forwardRef((props, ref) => {
  const { changeNum } = props

  // 更改数据传递到父组件
  const addNum = (val) => {
    changeNum(val)
  }
  return (
    <div>
      <button onClick={() => addNum(1)}>点击传参到父组件</button>
    </div>
  )
})

如需转载，请标明出处，谢谢
学习内容持续更新中......