react hooks 父传子，子传父

一、子传父

父组件中：

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;

 三，父组件传值和子组件点击调取

父组件中：

{item?.child &&(
      <FloorOnepointPurchase
           data={item}
           onHandleClick={onHandleClick}
           onGoTogrund={() => {
                onGoTogrund(item.benefitId);
           }}
           onBenefitReceive={(ItemIndex: number) => {
                onBenefitReceive(1, index, item.beId, ItemIndex);
           }}
       />
 )}

子组件中点击调用

const { data, onHandleClick, onGoTogrund, onBenefitReceive } = props
  const handleClick = () => {
    if (onHandleClick) {
      onHandleClick()
    }
  }
  const goGroundList = () => {
    if (onGoTogrund) {
      onGoTogrund()
    }
  }
  const handleReceiveClick = index => {
    if (onBenefitReceive) {
      onBenefitReceive(index)
    }
  }

<div styleName='flo-bot'>
          {data.onePointDetail?.map((ite, index) => {
            return (
              <div
                styleName='flo-bots'
                style={{
                  backgroundImage: `url(${data?.benefitImg})`
                }}
                key={index}
                onClick={() => {
                  if (ite.status === 1) {
                    handleReceiveClick(index)
                  }
                }}
              >
                <div>
                  {ite.desc}
                </div>
              </div>
            )
          })}
        </div>