props参数传入:
方法组件, 需要传入props 参数, 方法内部直接使用props.(不需要this),
class组件, 不需要传入props 参数, 方法内使用this.props.
官网介绍
(https://www.reactjscn.com/docs/components-and-props.html)
测试模板(正常运行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--/*1. 选择使用CDN*/-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<title>React 学习</title>
</head>
<body>
<div id="dd">
</div>
<script type="text/babel">
var divdd = document.getElementById('dd');
//测试函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
//测试class组件
class NewWelcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}</h1>;
}
}
ReactDOM.render(
<Welcome name="wendel"/>,
divdd
);
</script>
</body>
</html>
result
一, 测试函数组件, 去掉props参数传递
function Welcome() {
return <h1>Hello, {props.name}</h1>;
}
// or 下面这种写法
function Welcome() {
return <h1>Hello, {this.props.name}</h1>;
}
结果直接报错了.
二, 测试class组件
//测试class组件
class NewWelcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}</h1>;
}
}
运行结果ok
去掉this
//测试class组件
class NewWelcome extends React.Component{
render(){
return <h1>Hello, {props.name}</h1>;
}
}
报错 Uncaught ReferenceError: props is not defined
