React(十):props的基本使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>props的基本使用</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- Don't use this in production: --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="test1"></div> <div id="test2"></div> <div id="test3"></div> </body> <script type="text/babel"> class Person extends React.Component { render() { const { name, sex, age } = this.props return ( <ul> <li>姓名:{name}</li> <li>性别:{sex}</li> <li>年龄:{age}</li> </ul> ) } } //基本使用 ReactDOM.render(<Person name="张三" age="15" sex="男" />, document.getElementById('test1')) ReactDOM.render(<Person name="李四" age="16" sex="男" />, document.getElementById('test2')) //批量传递props const p = {name: "王五", age: 17, sex: "女"} ReactDOM.render(<Person {...p} />, document.getElementById('test3')) </script> </html>
需要注意的是props是只读的,不能修改