React教程-组件
在React中创建一个组件非常简单(React组件有2种,一个非状态组件,一个有状态组件)
首先我们来看看ES6里面如何写构造函数
class App{
constructor(){
}
event(){
console.log("event是类App的方法")
}
onChange(){
console.log("onChange是类App的方法")
}
}
在这个构造函数中App称为类
class Module extends App{
constructor() {
super()
}
}
Module继承父类App的所有方法跟属性
在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错
React组件写法
class App1 extends Component{
constructor(){
super()
this.state = {
}
this.Method = this.Method.bind(this)
}
Method(){
console.log("我是一个方法,我被的点击时候调用")
}
render(){
return(
//所有的html都写在return里面
<div onClick = {this.Method}>我们创建的组件</div> ) } }
export default App1;
React教程-组件的更多相关文章
- react教程 — 组件
一.state使用: 1.什么时候不能 设置state(或没有必要设置): a.constructor. 2.默认的 state 值,一定要在初始化设置.因为,render 比 setState 早. ...
- react教程 — 组件的生命周期 和 执行顺序
一.组件执行的生命周期: 参考 https://www.cnblogs.com/soyxiaobi/p/9559117.html 或 https://www.c ...
- React的组件间通信
一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...
- 学习react教程
网址收藏: React官网,React的Github,React的中文文档 1.react是什么? React起源于Facebook的内部项目,因为该公司对市场上所有的Javascript MVC框架 ...
- 【react表格组件】material-table 基本用法 & 组件override
教程: https://mbrn.github.io/material-table/#/ https://material-ui.com/api/table/ github: https://gith ...
- React入门介绍(2)- React Component-React组件
React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...
- 看完阮一峰的React教程后, 我写了一个TodoList
看完阮一峰的React教程后,就自己做了这个TodoList,自己慢慢琢磨效率差了点但是作为入门小练习还是不错的. 以下是效果图:我的源码:todolistUI:bootstrap 4 一.组件化 我 ...
- react教程 — 性能优化
参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool 或 https: ...
- (私人收藏)React教程手册
React教程手册 https://pan.baidu.com/s/1ka2PJ54HgqJ8lC6XgbvdLg pedx React 教程 含有3个附件,如下: react.js react-do ...
随机推荐
- Python3基础 set 删除list中的重复项
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- The DELETE statement conflicted with the REFERENCE constraint
Page是主表,主键是pageid:UserGroupPage表中的PageID字段是Page表里的数据. https://www.codeproject.com/Questions/677277/I ...
- 【附12】grafana配置文件
一.配置文件位置 /usr/local/opt/grafana/share/grafana/default.ini /usr/local/etc/grafana/grafana.ini 二.init格 ...
- BZOJ 5424: 烧桥计划
BZOJ 5424: 烧桥计划 目前暂居rk1QAQ 首先,设\(f[i][k]\)为前i个点中,选了第i个点,总共选了k个点的答案.那么就有: \[f[i][k]=min_{j<i}\{f[j ...
- spring boot 修改Tomcat端口
package com.tsou.Controller; import org.springframework.boot.*; import org.springframework.boot.auto ...
- 使用PDFminer3k解析pdf为文字遇到:WARING:root:GBK-EUC-H
最近需要把PDF解析为文字,查了查python的模块,发现PDFminer3k能满足需求.我使用的是 windows平台下的python3.6,python2的则下载pdfminer. 首先下载:直接 ...
- 【异常记录(11)】 Web应用程序项目 已配置为使用 IIS。无法访问 元数据库。您没有足够的特权访问计算机上的 IIS 网站
解决办法: 1.项目上右键, 编辑 xxxx.csproj 2.找到 <UseIIS> 标签, 改为 <UseIIS>False</UseIIS> 3.右键,重新 ...
- POJ 2728 Desert King(最优比率生成树 01分数规划)
http://poj.org/problem?id=2728 题意: 在这么一个图中求一棵生成树,这棵树的单位长度的花费最小是多少? 思路: 最优比率生成树,也就是01分数规划,二分答案即可,题目很简 ...
- 51nod 1307 绳子与重物(并查集水了一发)
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1307 题意: 思路: 可以直接二分答案,然后dfs. 因为标签是并查集, ...
- WCF 统一处理异常利用行为服务扩展
https://www.cnblogs.com/niaowo/p/4727378.html using System; using System.Collections.Generic; using ...