<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<h1 style="color: red;">React 父子传参</h1>
<div id="root"></div>
<script type="text/babel">
// 类方式特点：必须继承父组件
class Hello extends React.Component{
// 构造方法：new 类时自动触发
// React.Component父类继承 不需要写
/*constructor(props) {
super();
// 带有 this. 前缀，说么props 是成员属性：成员属性特点是可以跨方法使用
this.props = props;
}*/
render() {
return <h1>Hoell {this.props.name}</h1>
}
}
// bable会自动转译为 ReactDOM.render(new Hello({name: "罗根"}).render(), root)
ReactDOM.render(<Hello name="罗根" />,root)
let more = <div>
<Hello name="小米" />
<Hello name="小红" />
<Hello name="小张" />
<Hello name="小罗" />
</div>
ReactDOM.render(more, root)
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。