作用:用于接收组件外部的数据
传递数据: 通过给组件标签添加属性
接收数据:函数组件通过 参数 props接收数据,类组件通过 this.props接收数据
函数组件中props的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Hello(props) {
console.log(props)
return (
<div>函数组件接收外部的值:{props.name} --- {props.age}</div>
)
}
ReactDOM.render(<Hello name="rose" age={19}/>, document.getElementById('root'))
</script>
</body>
</html>
class类组件中props的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// class类组件
class Hello extends React.Component {
constructor(props) { // 如果写了constructor括号中一定得有props,否则会报错
super(props) // 这里不传props在constructor中下行打印出来为undefined
console.log(this.props)
}
render() {
console.log(this.props) // 这里都是可以拿到值得,不受影响
return (
<div>class类组件中props的基本使用:{this.props.name}</div>
)
}
}
ReactDOM.render(<Hello name="rose" age={19}/>, document.getElementById('root'))
</script>
</body>
</html>