react hooks 父传子，子传父

IT小姐姐 / 2023-08-20 / 原文

一、子传父

父组件中：

import React,{useState } from "react";
import HeXiaoDialog from "../components/hexiaoDialog";  //引入的子组件
function ShuoMing(props){
  let [flag , setFlag] = useState(false)
  const getFlag =()=>{
    setFlag(true)
  }
  return (
    <div style={{marginTop:'30px'}}>
      <div style={{marginBottom:'30px'}}>这里是父组件的地方
      <button style={{marginLeft:'20px'}} onClick={()=>{getFlag()}}>点击出现子组件</button>
      </div>
      {
        flag? <HeXiaoDialog setFlag={setFlag}></HeXiaoDialog>: <></>
      }
    </div>
  )
}
export default ShuoMing;

子组件中：

import React from 'react';
 function heXiaoDialog(props){
  const {setFlag} = props;
  return (
    <div>
      <div>这里是内容区域</div>
      <div>这里是内容区域</div>
      <div>这里是内容区域</div>
      <div>这里是内容区域</div>
    
      <button onClick={()=>{setFlag(false)}}>关闭子组件</button>
    </div>
  )
}
export default heXiaoDialog;

二、父组件传值给子组件

父组件中：

import React,{useState ,useEffect} from "react";
import HeXiaoDialog from "../components/hexiaoDialog";
function ShuoMing(props){
  let [flag , setFlag] = useState(false)
  let [list ,setList] = useState([])
  let [data , setData] = useState({})  //要传给 子组件的数据
  useEffect(() => {
    let data = {id:12,list:[{type:'哈哈', id:1},{type:'嘻嘻', id:2},{type:'呵呵', id:3}]}
    setData(data)
    setList([
      {title: '标题一：中国您好',id:1},
      {title: '标题二：世界您好',id:2},
      {title: '标题三：公司您好',id:3}
    ])
  }, [])
  
  const getFlag =()=>{
    setFlag(true)
  }
  return (
    <div style={{marginTop:'30px'}}>
      {
        list.map(item=>{
          return (
            <div key={item.id} style={{marginBottom:'30px'}}>{item.title}</div>
          )
        })
      }
      <button style={{marginLeft:'20px'}} onClick={()=>{getFlag()}}>点击出现子组件</button>
      {
        flag? <HeXiaoDialog setFlag={setFlag} setData={data} ></HeXiaoDialog>: <></>
      }
    </div>
  )
}

export default ShuoMing;

子组件中：

import React from 'react';
 function heXiaoDialog(props){
  const {setFlag , setData } = props;
  return (
    <div>
      {
        setData.list.map(item=>{
          return (
            <div key={item.id}>{item.type}</div>
          )
        })
      }
      <button onClick={()=>{setFlag(false)}}>关闭子组件</button>
    </div>
  )
}
export default heXiaoDialog;