<!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> <!-- 单项数据流 props 推荐父级向子级传递 只读 --> <script type="text/babel"> function Good(props) { console.log(props,'父级的内容') return ( <div style={{border:"2px solid #f00",padding:"10px"}}> <p>这是一个父级标签</p> <Day name='图图' age={4}></Day> </div> ) } function Day(props) { console.log(props,'子级的内容') return ( <div style={{border:"2px solid #00f",padding:"10px"}}> <p>这是一个子级标签</p> <p>我的名字叫{props.name}</p> <p>我今年{props.age}岁了</p> <button onClick={()=>{ handelClick(props) }}>获取内容</button> </div> ) } function handelClick(props) { console.log(props,'内容') } let element = <Good/> ReactDOM.createRoot(document.querySelector("#root")).render(element); </script> </body> </html>