2.react函数式组件传值

函数式组件传值：

父传子

1）在父组件中找对子标签，在子组件的标签上添加自定义属性，自定义属性名 = {要发送的数据}
<Child 自定义属性名={要发送的数据}></Child>
2）在子组件模板中使用props.自定义属性名可以获取父组件传递过来的数据，同时在子组件的函数中接受一个参数 props

子传父

前提必须要有props，在函数组件的行參的位置，需要的是子组件的函数的props

1）在子组件中自定义一个数显进行数据发送，在需要出发的dom元素上面绑定自定义事件子组件模板

<p onClick={自定义事件}></p>
function 自定义事件(){
        props.**自定义属性名a**(要发送的数据)
}

2）在父组件中找到子组件标签，在子组件标签上面写 自定义属性={新的自定义方法}

<子组件标签 **自定义属性名a**={新的方法}></子组件标签>（这个两个  **自定义属性名** 要一致）

3）父组件中接收自定义参数，这个自定义参数就是子组件传递给父组件的数据

function 新的方法(参数){
       console.log(参数) // 参数就是子组件传递给父组件的数据
}

父组件：

import React, { useState } from 'react'
// 组件
import Item from './components/item.jsx'

function App() {
  const [msg1] = useState({id:'001',name:'王大顺',age:24,sex:'男'});
  const [msg2] = useState({id:'002',name:'吴磊',age:25,sex:'男'});
  const [msg3] = useState({id:'003',name:'鞠婧祎',age:30,sex:'女'});
  
  return (
    <div className="App">
      <Item send={send} msg={msg1}></Item>
      <Item send={send} msg={msg2}></Item>
      <Item send={send} msg={msg3}></Item>
    </div>
  );

  function send(a,b){
    console.log(a,b)
  }

}

export default App;

子组件：

import React, { useState } from 'react'

export default function Item(props) {
  const {name,age,sex} = props.msg
  
  const [texts] = useState(`我叫${name},我是${sex}生，我今年${age}岁了`)

  return (
    <div>
      <ul>
        <li>姓名：{name}</li>
        <li>年龄：{age}</li>
        <li>性别：{sex}</li>
        <button onClick={()=>send(1)}>传值给父组件</button>
      </ul>
    </div>
  )
  function send(i){
    props.send(texts,i)
  }
}