ReactJs 第四章组件组件props

1，组件以及组件值的传递
在之前我们介绍了JSX、React元素，以及元素的渲染，接下来我们要进入React的页面组成关键组件。

这时我们就可以将React元素的范围进行扩充，React元素可以分为原生html元素标签和用户自定义组件元素。

用户自定义组件又分为函数组件和ES6的class组件。在React解析过程中小写开头的标签都会以html原生标签进行解析，如果用户自定义的组件元素以小写开头，页面则会报错。

在使用自定义组件时，需要给组件传递参数使用属性进行传递，所有属性将会封装到一个props对象中进行转递。在calss组件内部通过this.props.attrName 获取。在函数组件中，则通过函数唯一参数进行获取。如下：

import React from 'react';
import ReactDOM from 'react-dom';//元素：原生html标签 、自定义组件元素//原生html标签
const htmlDom = <h1>Hello,zhangsan!</h1>;//函数组件
function WelCome (props){return <h1>Hello,{props.name}!</h1>;
}//等效 ES6 class 组件
class WelCome2 extends React.Component{render(){return <h1>Hello,{this.props.name}</h1>}
}//ReactDOM.render(<WelCome name="张三" />,document.getElementById('root'));
//效果等同
ReactDOM.render(<WelCome2 name="张三" />,document.getElementById('root'));

我们对上一章节中的时间页面进行更新使用属性props进行传值代码如下：

function Clock(props){return (<div>Time is :{props.date.toLocaleTimeString()}</div>);
}function timeRun(){ReactDOM.render(<Clock date={new Date()}/>,document.getElementById('root'));
}
setInterval(timeRun,1000);

2，组合组件

我们在写页面时，往往页面内容比较复杂嵌套以及布局复杂，甚至很多地方代码重复。所以React可以将我们目前比较复杂的页面进行按不同模块进行拆分成不同的组件，并且相同结构的代码功能可以归并为一个组件。我们可以使用组件的内外嵌套或者组合完成一个复杂较大页面的实现。

比如在一个留言板的页面中，有不同用户的不同留言列表。每一项留言都包含用户的头像、姓名、留言内容、时间等相同的元素。我们则可以对其进行逐步抽取为小组件，进行展示。

没有抽取前的组件

function Comment(props) {return (<div className="Comment"><div className="UserInfo"><Avatar user={props.author} /><div className="UserInfo-name">{props.author.name}</div></div><div className="Comment-text">{props.text}</div><div className="Comment-date">{formatDate(props.date)}</div></div>);
}

抽取之后的小组件


function Author(props){return (<img className="Avatar"src={props.author.avatarUrl}alt={props.author.name}/>);
}function User(props){return (<div className="UserInfo"><Author  author={props.author}/><div className="UserInfo-name">{props.author.name}</div></div>);
}function Comment(props) {return (<div className="Comment"><User  author={props.author} /><div className="Comment-text">{props.text}</div><div className="Comment-date">{props.date}</div></div>);
}ReactDOM.render(<Comment text="留言内容" date="2020-03-16" author={{name:"zhangsan",avatarUrl:"xxx"}} />,document.getElementById('root'));

其效果都展示一样。

3，props 的只读性

在组件值的传递中我们不能修改props的传参值。这只是一个约定。如果我们需要进行组件内部更新数据时，下一章会讲到组件内部的状态值state用来更新组件内容；

ReactJs 第四章组件组件props相关推荐

第四章自定义组件、动画
文章目录第四章自定义组件.动画 (一)View体系 (1)View简介 (2)Android坐标系 (3)视图坐标系 (二)自定义View (1)onMeasure:对当前View的尺寸进行测量 ...
【前端框架】react框架第四章 react组件进阶
目录 1. 组件的props 特点 2. 组件通迅的三种方式父组件传递数据给子组件子组件传递数据组父组件兄弟组件 3. Context Context使用步骤 4. props深入 props校 ...
ASP.NET自定义控件组件开发第四章组合控件开发CompositeControl
第四章组合控件开发CompositeControl 大家好,今天我们来实现一个自定义的控件,之前我们已经知道了,要开发自定义的控件一般继承三个基类:Control,WebControl,还有一个就 ...
四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
【Vue3 第十四章】父子组件通信
数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城个人博客地址一.概述在Vue的框架开发的项目过程中,经常会用到组件来管理不同 ...
第十四章：Element-ui组件库
第十四章:Element-ui组件库一.常用的UI组件库 1.1 移动端常用UI组件库 Vant组件库 Mint组件库 Cube组件库 1.2 PC端常用UI组件库 Element UI组件库饿了 ...
React 第五章 state 组件生命周期
本章我们主要讲解组件之state使用,以及组建的生命周期,在本章我们将使用class进行组件编写. 1,组件的状态state 在之前我们讲过一个页面时间的例子,之前我们使用的属性props进行定时页 ...
【Vue3】第十四部分父子组件传参
[Vue3]第十四部分父子组件传参文章目录 [Vue3]第十四部分父子组件传参 14. 父子组件传参 14.1 父传子(props) 14.2 子传父(emit) 14.3 子传父(ref) 总 ...
React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
1.组件通讯介绍组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据(state). 在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能. 而在这个过程中,多个组 ...

ReactJs 第四章组件组件props

ReactJs 第四章组件组件props相关推荐

最新文章

热门文章