React学习（二）props属性

来源：互联网发布：复制文件夹网络共享编辑：程序博客网时间：2024/05/29 08:14

React

一、props属性知识点

1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值: this.props.propertyName
4.作用: 通过标签属性从组件外向组件内传递数据(只读)
5.对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired}
6.扩展属性: 将对象的所有属性通过props传递

二、组件的组合

1、 组件标签中包含子组件标签2、拆分组件: 拆分界面, 抽取组件3、通过props传递数据

例题2、如何用组件组合实现以下效果
例题2

<!DOCTYPE html><html><head>    <meta charset="UTF-8">        <title>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 type="text/babel">     1. 拆分组件: 拆分界面, 抽取组件       * 单个标题组件: Welcome       * 应用组件: App     2. 分析确定传递数据和数据类型       * Welcome: props.name  string       * App: props.names    array    function Welcome(props) {    return <h2> Welcome {props.name} </h2>;}//直接传参数    class App extends React.component{    render(){    return(    <div>    { this.props.names.map(name =>{            return <Welcome name={name}/>        })}    </div>)}}    var names = ["Tom","Jack","rock"];    ReactDOM.render(<App names={names}/>,document.getElementById("example"))</script></body></html>

三、详解例题2React渲染步骤

1.创建APP实例对象2.调用render（），得到虚拟DOM<div>  <Welcome name="TOM"/>  <Welcome name="Jack"/>  <Welcome name="rock"/></div>3.找出其中的组件标签<Welcome>，调用对应的Welcome函数，得到对应的虚拟DOM，替换<Welcome>  <div>    <h2>Welcome TOM</h2>    <h2>Welcome Jack</h2>    <h2>Welcome rock</h2>  </div>4.将虚拟DOM转化成真实DOM，并插入到example对应的div中

阅读全文

0 0