版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38323645/article/details/83316111
入门
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_component_props</title>
</head>
<body>
<ul>
<li>姓名: 李白</li>
<li>性别: 男</li>
<li>年龄:13</li>
</ul>
<hr>
<div id="example"></div>
<div id="example2"></div>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.2/prop-types.js"></script><!--浏览器 警告提示-->
<script type="text/babel">
class Person extends React.Component{
render () {
console.log(this.props);
return (
<ul>
<li>姓名:{this.props.username}</li>
<li>年龄:{this.props.age}</li>
<li>性别:{this.props.sex}</li>
</ul>
)
}
}
//设置组件的默认值 当渲染没写这个:sex={person.sex}时候 默认sex为男
Person.defaultProps = {
sex: '男'
};
// 对props中的属性值进行类型限制和必要性限制 比如该组件的username必须是String类型 且必须;age必须是number类型且必须
Person.propTypes = {
username: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
};
let person = {username:'张三',sex:'男',age:18}
ReactDOM.render(<Person username={person.username} sex={person.sex}/>,document.getElementById("example"));
</script>
</body>
</html>
运行
当然 也可以对person进行如下操作:
//也可这样
ReactDOM.render(<Person {...person}/>,document.getElementById("example2"));
运行结果:
组件嵌套:
在App组件里面嵌套Welcome组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05_components_composing</title>
</head>
<body>
<div id="example"></div>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.2/prop-types.js"></script><!--浏览器 警告提示-->
<script type="text/babel">
/*
1. 拆分组件: 拆分界面, 抽取组件
* 单个标题组件: Welcome
* 应用组件: App
2. 分析确定传递数据和数据类型
* Welcome: props.name string
* App: props.names array
*/
//定义组件
class App extends React.Component{
render () {
let arr = this.props.arr;
return (
<div>
{
arr.map((item,index) => {
return <Welcome key={index} name={item}/>
})
}
</div>
)
}
}
//定义组件
function Welcome(props) {
return <h1>welcome {props.name} </h1>
}
let arr = ['张三','李四','王五'];
ReactDOM.render(<App arr={arr}/>,document.getElementById("example"));
</script>
</body>
</html>
效果: