组件的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 获取对象输入的属性值
.get_attribute("value") from selenium import webdriver import time driver=webdriver.Firefo ...
- Vue6——v-model实现数据双向绑定
博客地址 :https://www.cnblogs.com/sandraryan/ v-model 用于input标签,用于实现双向绑定,及时把数据的变化渲染在页面 双向绑定及原理 举个双向绑定的简单 ...
- 梯度优化算法Adam
最近读一个代码发现用了一个梯度更新方法, 刚开始还以为是什么奇奇怪怪的梯度下降法, 最后分析一下是用一阶梯度及其二次幂做的梯度更新.网上搜了一下, 果然就是称为Adam的梯度更新算法, 全称是:自适应 ...
- poj 2689 Prime Distance (素数二次筛法)
2689 -- Prime Distance 没怎么研究过数论,还是今天才知道有素数二次筛法这样的东西. 题意是,要求求出给定区间内相邻两个素数的最大和最小差. 二次筛法的意思其实就是先将1~sqrt ...
- 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 ...
- jQuery 文档操作 - remove() 方法
移除所有 <p> 元素: 定义和用法 remove() 方法移除被选元素,包括所有文本和子节点. 该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素. ...
- 31页PPT:基于Spark的移动大数据挖掘
31页PPT:基于Spark的移动大数据挖掘 数盟11.16 Data Science Meetup(DSM北京)分享:基于Spark的移动大数据挖掘分享嘉宾:张夏天(TalkingData首席数据科 ...
- 前端开发之JavaScript
JavaScript JS是一种脚本语言,浏览器执行,用于渲染HTML网页,实现网页的动画效果. JavaScript的引用方式: 1,在HTML文件中script标签中写JS代码 <scrip ...
- Python3 dir() 函数
Python dir() 函数 描述 dir() 函数不带参数时,返回当前范围内的变量.方法和定义的类型列表:带参数时,返回参数的属性.方法列表.如果参数包含方法__dir__(),该方法将被调用.如 ...
- html input onfocus
<input type="text" value="请输入内容" onfocus="javascript:if(this.value=='请输入 ...