组件的props属性和state状态
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状态:
- //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>
- )
- }
- }
- this.likedCallback = this.likedCallback.bind(this);
组件的props属性和state状态的更多相关文章
- React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
1.创建组件的方法 函数组件 class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...
- 在vue组件中使用vuex的state状态对象的5种方式
下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count: ...
- React Native知识11-Props(属性)与State(状态)
一:Props(属性) 大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性).props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变 通过 ...
- 组件通过props属性传值
组件之间的传值 组件是一个单独功能模块的封装,有属于自己的data和methods,一个组件的 data 选项必须是一个函数 为什么必须是函数:因为只有当data是函数时,不同实例调用同一个组件时才会 ...
- 【Vue】组件watch props属性值
转载: https://www.cnblogs.com/mqxs/p/8972368.html #HTML <div id="example"> <p> & ...
- React组件(组件属性this.state和this.props,css样式修饰组件)
目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...
- Vue.js 源码分析(十三) 基础篇 组件 props属性详解
父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...
- 深入理解Vue父子组件通讯的属性和事件
在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...
随机推荐
- python selenium处理iframe和弹框(一)
处理iframe和弹框 # encoding:utf-8 from selenium import webdriver import time driver = webdriver.Firefox() ...
- uva 11754 Code Feat (中国剩余定理)
UVA 11754 一道中国剩余定理加上搜索的题目.分两种情况来考虑,当组合总数比较大的时候,就选择枚举的方式,组合总数的时候比较小时就选择搜索然后用中国剩余定理求出得数. 代码如下: #includ ...
- uva 11174 Stand in a Line (排列组合)
UVa Online Judge 训练指南的题目. 题意是,给出n个人,以及一些关系,要求对这n个人构成一个排列,其中父亲必须排在儿子的前面.问一共有多少种方式. 做法是,对于每一个父节点,将它的儿子 ...
- Android Studio(一):介绍、安装、配置
Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...
- oracle 使用显式的游标(CURSORs)
使用隐式的游标,将会执行两次操作. 第一次检索记录, 第二次检查TOO MANY ROWS 这个exception . 而显式游标不执行第二次操作.
- iptables [-j target/jump] 常用的处理动作
-j 参数用来指定要进行的处理动作,常用的处理动作包括:ACCEPT.REJECT.DROP.REDIRECT.MASQUERADE.LOG.DNAT.SNAT.MIRROR.QUEUE.RETURN ...
- 深入理解String、StringBuffer、StringBuilder(转)
文章系转载,非原创,原地址: http://www.cnblogs.com/dolphin0520/p/3778589.html 相信String这个类是Java中使用得最频繁的类之一,并且又是各大公 ...
- [转]ECMAScript 2016,2017 和 2018 中所有新功能的示例
很难追踪 JavaScript(ECMAScript)中的新功能. 想找到有用的代码示例更加困难. 因此,在本文中,我将介绍 TC39 已完成 ES2016,ES2017 和 ES2018(最终草案) ...
- Oracle备库宕机启动解决方案
简介 ORA-10458: standby database requires recovery ORA-01196: 文件 1 由于介质恢复会话失败而不一致 ORA-01110: 数据文件 1: ' ...
- 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 ...