React没有搭建脚手架时组件传参
- 通过函数创建组件传参时 需要在函数里面进行显式的参数传递
- 通过类创建的组件传参时 不需要显示的参数传递 但是调用的时候需要加上this.什么什么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<style>
.Demo2{
color: red;
}
</style>
<title>入门实例2</title>
</head>
<body>
<div id="root1"></div>
<div id="root2"></div>
<li></li>
<li></li>
</body>
<script type="text/babel">
window.οnlοad=()=>{
// 写法一
function Demo1(props){ //函数时需要显式的传递参数
console.log(props.name);
return <h4>写法一参数>>>>>>>>>>>>>>>{props.name}</h4>
}
var a={
name:123
}
const element2 = (<Demo1 name={a.name}/>);
ReactDOM.render(
element2,
document.getElementById("root1")
);
// 写法二
class Demo2 extends React.Component{ //es6 类的写法时不需要显式的传递参数
render(){
return <h4 className="Demo2">写法二参数>>>>>>>>>>>>>>>{this.props.name}</h4>;
}
}
var o = <Demo2 name="保罗" />
ReactDOM.render(
o,
document.getElementById("root2")
)
}
</script>
</html>