2.react函数式组件传值

函数式组件传值：

父传子

1）在父组件中找对子标签，在子组件的标签上添加自定义属性，自定义属性名 = {要发送的数据}

2）在子组件模板中使用props.自定义属性名可以获取父组件传递过来的数据，同时在子组件的函数中接受一个参数 props

子传父

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

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

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 (
    

      
      
      
    
  );

  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 (
    

      

        
姓名：{name}
        
年龄：{age}
        
性别：{sex}
        send(1)}>传值给父组件
      
    
  )
  function send(i){
    props.send(texts,i)
  }
}