<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/babel">
//props组件传参问题
class Person extends React.Component{
constructor(props){
super(props)
}
render(){
console.log("props",this.props);
return(
<div>
<ul>
<li>姓名:{this.props.name}</li>
<li>性别:{this.props.gender}</li>
<li>年龄:{this.props.age}</li>
</ul>
</div>
)
}
}
const age = 19
const vDom = <Person name="杨幂" age={age} gender="woman"/>
const vDom1 = <Person name="Angel" age={age} gender="woman"/>
const p ={name:"刘亦菲",age:18,gender:"womam"}
const vDom2 = <Person {...p}/>
ReactDOM.render(vDom,document.getElementById("test"))
ReactDOM.render(vDom1,document.getElementById("test1"))
ReactDOM.render(vDom2,document.getElementById("test2"))
</script>
</body>
</html>
props基本使用React
最新推荐文章于 2024-05-17 08:00:00 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)