Testaccount
/
1.Test


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../babel.min.js"></script>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        //父组件向子组件传参使用 props 单向数据流 不能修改 只读
        function Parent(){
            return (
                <div style={{border: "1px red solid"}}>
                    <h2>我是父组件</h2>
                    <Child name="海绵宝宝" age={4}/>
                </div>
            )
        }
        function Child(props){
            // console.log(props,"子组件的内容")
            return (
                <div style={{border: "1px blue solid"}}>
                    <h2>我是子组件</h2>
                    <p>我是父组件传递过来的参数：我是 {props.name} 我的年龄是 {props.age}</p>
                    <button onClick={()=>{
                        handleGet(props)
                    }}>获取内容</button>
                    
                    {/*
                        props 是只读的 不能修改
                        <button onClick={()=>{
                            handleChange(props)
                        }}>修改内容</button>
                    */}
                </div>
            )
        }
        function handleChange(props){
            props.name = "小猪佩奇"
        }
        function handleGet(props){
            console.log("获取内容是：" + props.name + "年龄是" + props.age)
        }
        let element = <Parent/>
        ReactDOM.createRoot(document.getElementById('root')).render(element)
    </script>
</body>
</html>