<script type="text/babel">
class Information extends React.Component {
constructor(props) {
super(props);
}
render() {
const { name, sex, age } = this.props;
return (
<div>
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age}</li>
</ul>
</div>
);
}
}
ReactDOM.render(
// 传number数据类型的值时要加花括号,以区别字符串类型
<Information name="chenting01" sex="femlae" age={21} />,
document.getElementById("root01")
);
const perOne = { name: "chenting02", sex: "female", age: 21 };
ReactDOM.render(
// {}表明此为jsx语言里的js表达式,...符号表示展开对象,一般情况下对象不可被展开,此为唯一特例
// {...p}在js中表示的为浅拷贝,又或者说是仅限一层的深拷贝
<Information {...perOne} />,
document.getElementById("root02")
);
</script>
react中给组件传number类型数据
最新推荐文章于 2023-08-28 14:59:43 发布