react中子传父

最新推荐文章于 2024-05-25 09:21:51 发布

鲤忆

最新推荐文章于 2024-05-25 09:21:51 发布

阅读量120

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_62487693/article/details/129757281

版权

react 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app"></div>
    <script src="../0assets/新版本/react.dev.18.2.js"></script>
    <script src="../0assets/新版本/react-dom-dev.js"></script>
    <script src="../0assets/新版本/prop-type.js"></script>
    <script src="../0assets/新版本/babel.min.js"></script>
    <script type="text/babel">
        const App = () => {
            let [msg, setMsg] = React.useState('app私有状态：Helloween ')
            let [text,setText] =React.useState('') //7.重新创建一个状态
            setTimeout(() => {
                setMsg('更新了msg')
            }, 2000)

            //2.创建函数
            const handle = (text) => {
                console.log('handle run',text);
                setText(text)//8.将子组件中的内容 传入到父组件响应式数据中 （可以在父组件使用了）
            }
            
            return (
                <div>
                    
                    <Child msg={msg} onhandle={handle} /> 
                    {/*  1.定义自定义属性 onhandle={}   3.传值  onhandle={handle} */}
                    
               
                </div>
            )
        }

        //4.传入 onhandle
        const Child = ({ msg,onhandle }) => {
            let [text, setText] = React.useState('CHILD 中 sttate')
            const sendText=()=>{
                onhandle(text)  //5.引用onhandle 将实参text 传出到  第二步的形参中
            }
            return (
                <div>
                    <h1>{msg}</h1>
                    <button onClick={()=>{sendText()}}>点击传递</button> {/*6.点击传参*/}
                </div>

            )
        }

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
  

</body>

</html>

鲤忆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react中子传父

5.父组件：如果需要绑定页面上，重新创建一个状态，并在函数中使用setXXX更新状态值。3.子组件：在组件内部，满足条件时，触发函数，并传入实参（实参为当前组件私有状态）2.子组件：在组件中通过 props（可以使用{} 解析）获取自定义属性。1.父组件：使用组件时，定义自定义属性，并赋值定义的函数。4.父组件：定义函数形参中接受实参。
复制链接

扫一扫