react父子组件传参demo

父组件代码

�index.php/tags-41973.html" >�

/* eslint-disable @next/next/no-img-element */"use client";import React, { useEffect, useState } from "react";import WxTip from '../components/WxTip'const Download = () => {    const [showTip, setshowTip] = useState(false)    useEffect(() => {            },[])    const onClose = () => {        setshowTip(false)    }    const wxClick = () => {        setshowTip(true)    }    return (                                     wxClick()} className={'btn'}>立即下载                                    )    }export default Download;

子组件jsx代码

import React from "react"export interface WxtipProps {    showTip: Boolean,    newYear?: Boolean,    onClose?: Function}const WxTip: React.FC = (props) => {    const { showTip , newYear = false,onClose} = props    const Close = ()=>{        onClose && onClose()    }    const TipView = () => (         Close()}>                        
点击右上角···
选择在浏览器中打开进行下载
                                                    )    return (                    { showTip && TipView() }            )}// WxTip.defaultProps = {showTip:false}export default WxTip

子组件css代码

.wxtip {    background: rgba(0, 0, 0, 0.8);    text-align: center;    position: fixed;    left: 0;    top: 0;    width: 100%;    height: 100%;    z-index: 1001;    display: block;    .wxtipIcon2{        margin: 0 auto;        width:58vw;        height: 70vh;        background: url("../public/wxtipphone.png") no-repeat;        background-size: contain;    }    .wxtipIconNewYear{        margin: 0 auto;        width:58vw;        height: 70vh;        background: url("../public/wxtipphonenewYear.png") no-repeat;        background-size: contain;    }    .wxtipIcon3{        width: 230px;        height: 230px;        background: url("../public/prompt2.png") no-repeat;        background-size: cover;        border-radius: 50%;        position: fixed;        z-index: 999;        top: 750px;        right: 56px;    }    .wxTipIcon{        width:110px;        height: 130px;        background: url("../public/IndicatingArrow2.png") no-repeat;        display: block;        position: absolute;        right: 20px;        top: 40px;    }    .wxtipTxt{        color: #FFF;        margin-top: 80px;        font-size: 26px;        margin-bottom: 50px;        width: 52vw;        margin-left: 24vw;        line-height: 58px;        text-align: left;    }}

子组件样式