props属性:

  我使用代码来说明React中props属性:

  1. // Profile.jsx
  2. import React from 'react' ;
  3. export default Class Profile extends React.Component {
  4. // render 是这个组件渲染的Vitrual DOM结构
  5. render() {
  6. return (
  7. <div className-"profile-component">
  8. </*this.props就是传入的属性*/>
  9. <h1>my name is {this.props.name}</h1>
  10. <h2>my age is {this.props.age}</h2>
  11. </div>
  12. )
  13. }
  14. }

用这种方式,就实现了一个React的组件,在其他的组件中,可以像HTML标签一样引用它。有了组件以后,可以使用React提供的另外一个库ReactDOM把这个组件挂载到DOM节点上。

  1. // app.jsx
  2. import { render } from 'react-dom';
  3. import Profile from './profile';
  4. render(<Profile name="lewis" age= />, document.getElementById('app'));
  5. // 或者可以使用...属性拓展
  6. const props = {
  7. name: 'lewis',
  8. age:
  9. };
  10. render(<Profile {...props} />, document.getElementById('app'));

state状态:

  state是组件内部的属性。组件本身是一个状态机,它可以在constructor中通过this.state直接定义它的值,然后根据这此值来渲染不同的UI。当state的值发生改变时,可以通过this.setState方法让组件再次调用render方法来渲染新的UI。
  1. //Profile.jsx
  2. export default class Profile extends React.Component {
  3. constructor (props) {
  4. super (props);
  5. this.state = {
  6. liked:
  7. };
  8. this.likedCallback = this.likedCallback.bind(this);
  9. }
  10. likedCallback() {
  11. let liked = this.state.liked;
  12. liked++;
  13. this.setState({
  14. liked
  15. });
  16. }
  17.  
  18. render() {
  19. return (
  20. <div>
  21. <h1>我的名字叫{this.props.name}</h1>
  22. <h2>我今年{this.props.age}</h2>
  23. <button onClick={this.likedCallback}>点赞</button>
  24. <h2>总点赞数:{this.state.liked}</h2>
  25. </div>
  26. )
  27. }
  28. }
  和上面描述的一样,在constructor中添加this.state的定义,每次单击按钮以后调用回调函数,给当前liked值加1,然后更新this.setState完成UI的重新渲染。因为在ES6 class 类型的component组件声明方式中,不会把一些自定义的callback函数绑定到实例上,所以需要手动在constructor里面绑定。
  1. this.likedCallback = this.likedCallback.bind(this);

组件的props属性和state状态的更多相关文章

  1. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  2. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  3. 在vue组件中使用vuex的state状态对象的5种方式

    下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count: ...

  4. React Native知识11-Props(属性)与State(状态)

    一:Props(属性) 大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性).props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变 通过 ...

  5. 组件通过props属性传值

    组件之间的传值 组件是一个单独功能模块的封装,有属于自己的data和methods,一个组件的 data 选项必须是一个函数 为什么必须是函数:因为只有当data是函数时,不同实例调用同一个组件时才会 ...

  6. 【Vue】组件watch props属性值

    转载: https://www.cnblogs.com/mqxs/p/8972368.html #HTML <div id="example"> <p> & ...

  7. React组件(组件属性this.state和this.props,css样式修饰组件)

    目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...

  8. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  9. 深入理解Vue父子组件通讯的属性和事件

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...

随机推荐

  1. python selenium处理iframe和弹框(一)

    处理iframe和弹框 # encoding:utf-8 from selenium import webdriver import time driver = webdriver.Firefox() ...

  2. uva 11754 Code Feat (中国剩余定理)

    UVA 11754 一道中国剩余定理加上搜索的题目.分两种情况来考虑,当组合总数比较大的时候,就选择枚举的方式,组合总数的时候比较小时就选择搜索然后用中国剩余定理求出得数. 代码如下: #includ ...

  3. uva 11174 Stand in a Line (排列组合)

    UVa Online Judge 训练指南的题目. 题意是,给出n个人,以及一些关系,要求对这n个人构成一个排列,其中父亲必须排在儿子的前面.问一共有多少种方式. 做法是,对于每一个父节点,将它的儿子 ...

  4. Android Studio(一):介绍、安装、配置

    Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...

  5. oracle 使用显式的游标(CURSORs)

    使用隐式的游标,将会执行两次操作. 第一次检索记录, 第二次检查TOO MANY ROWS 这个exception . 而显式游标不执行第二次操作.

  6. iptables [-j target/jump] 常用的处理动作

    -j 参数用来指定要进行的处理动作,常用的处理动作包括:ACCEPT.REJECT.DROP.REDIRECT.MASQUERADE.LOG.DNAT.SNAT.MIRROR.QUEUE.RETURN ...

  7. 深入理解String、StringBuffer、StringBuilder(转)

    文章系转载,非原创,原地址: http://www.cnblogs.com/dolphin0520/p/3778589.html 相信String这个类是Java中使用得最频繁的类之一,并且又是各大公 ...

  8. [转]ECMAScript 2016,2017 和 2018 中所有新功能的示例

    很难追踪 JavaScript(ECMAScript)中的新功能. 想找到有用的代码示例更加困难. 因此,在本文中,我将介绍 TC39 已完成 ES2016,ES2017 和 ES2018(最终草案) ...

  9. Oracle备库宕机启动解决方案

    简介 ORA-10458: standby database requires recovery ORA-01196: 文件 1 由于介质恢复会话失败而不一致 ORA-01110: 数据文件 1: ' ...

  10. Codeforces Round #194 (Div.1 + Div. 2)

    A. Candy Bags 总糖果数\(\frac{n^2(n^2+1)}{2}\),所以每人的数量为\(\frac{n}{2}(n^2+1)\) \(n\)是偶数. B. Eight Point S ...