<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props基本使用</title>
</head>
<body>
<!-- 准备好“容器” -->
<div id="test1"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Person extends React.Component{
render(){
//render里面的this就是Person组件的实例对象
//这个对象里面有一个props属性
// console.log(this);
//写法1
//return (
// <ul>
// <li>姓名：{this.props.name}</li>
// <li>性别：{this.props.sex}</li>
// <li>年龄：{this.props.age}</li>
// </ul>
//)
//写法2（改进）
const {name,age,sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
//渲染组件到页面
//这里的name={p.name} age={p.age} sex={p.sex}就是往组件传数据
//传给组件的props属性
// ReactDOM.render(<Person name="jielong" age=23 sex="男"/>,document.getElementById(‘test1‘))
</script>
</body>
</html>
原文：https://www.cnblogs.com/jielong-qiu/p/14724152.html