props属性:

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

// Profile.jsx
import React from 'react' ;
export default Class Profile extends React.Component {
// render 是这个组件渲染的Vitrual DOM结构
render() {
return (
<div className-"profile-component">
</*this.props就是传入的属性*/>
<h1>my name is {this.props.name}</h1>
<h2>my age is {this.props.age}</h2>
</div>
)
}
}

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

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

state状态:

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

    .get_attribute("value") from selenium import webdriver import time driver=webdriver.Firefo ...

  2. Vue6——v-model实现数据双向绑定

    博客地址 :https://www.cnblogs.com/sandraryan/ v-model 用于input标签,用于实现双向绑定,及时把数据的变化渲染在页面 双向绑定及原理 举个双向绑定的简单 ...

  3. 梯度优化算法Adam

    最近读一个代码发现用了一个梯度更新方法, 刚开始还以为是什么奇奇怪怪的梯度下降法, 最后分析一下是用一阶梯度及其二次幂做的梯度更新.网上搜了一下, 果然就是称为Adam的梯度更新算法, 全称是:自适应 ...

  4. poj 2689 Prime Distance (素数二次筛法)

    2689 -- Prime Distance 没怎么研究过数论,还是今天才知道有素数二次筛法这样的东西. 题意是,要求求出给定区间内相邻两个素数的最大和最小差. 二次筛法的意思其实就是先将1~sqrt ...

  5. OP_REQUIRES failed at conv_ops.cc:386 : Resource exhausted: OOM when allocating tensor with shape..

    tensorflow-gpu验证准确率是报错如上: 解决办法: 1. 加入os.environ['CUDA_VISIBLE_DEVICES']='2' 强制使用CPU验证-----慢 2.'batch ...

  6. jQuery 文档操作 - remove() 方法

    移除所有 <p> 元素: 定义和用法 remove() 方法移除被选元素,包括所有文本和子节点. 该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素. ...

  7. 31页PPT:基于Spark的移动大数据挖掘

    31页PPT:基于Spark的移动大数据挖掘 数盟11.16 Data Science Meetup(DSM北京)分享:基于Spark的移动大数据挖掘分享嘉宾:张夏天(TalkingData首席数据科 ...

  8. 前端开发之JavaScript

    JavaScript JS是一种脚本语言,浏览器执行,用于渲染HTML网页,实现网页的动画效果. JavaScript的引用方式: 1,在HTML文件中script标签中写JS代码 <scrip ...

  9. Python3 dir() 函数

    Python dir() 函数 描述 dir() 函数不带参数时,返回当前范围内的变量.方法和定义的类型列表:带参数时,返回参数的属性.方法列表.如果参数包含方法__dir__(),该方法将被调用.如 ...

  10. html input onfocus

    <input type="text" value="请输入内容" onfocus="javascript:if(this.value=='请输入 ...