小钿钿不忘初心的博客

1:事件与原生事件类型 react中式on+首字母大写的事件名 例如onClick如图 只需要on以后常用的事件都会提示出来2:在Content.js中新建一系列的按钮来对事件进行学习2.1 普通的函数绑定 <button onClick={function(){alert('6666')}}>按钮1</button>2.2 箭头函数的绑定 <button onClick={()=>{ alert("7777"); }}>按钮2&

1:资料来源https://www.npmjs.com/package/prop-types 利用第三方prop-types来处理 让props看起来有数据类型约束(js是弱语言没有数据类型的概率)2:安装npm install --save prop-types3:使用 在需要用的地方引入(Header.js)4:做一下测试会到index.js中 给Header传一个数字试一试 index.js中代码改写如下 里面的代码也可以写useage={18}5:运行代码 结果不会错 页面

1:props是子组件用来接收父组件的数据 父组件如果传十个参数 但是子组件用了9个 就会导致子组件中满屏都是this.props 就很难去区分各个参数的作用2:将需要用的数据 放入constructor中进行提前说明 代码如下3:还需要跟子组件自身的数据有所区分才行(函数中参数和自己定义的内容) 可以使用state来做区分...

一、背景1、为什么需要React-Native？在React-Native出现之前移动端主流的开发模式是原生开发和Hybrid开发（H5混合原生开发），Hybrid app相较于native app的优势是开发成本低开发速度快(H5页面开发跨平台，无需重新写web、android、ios代码)，尽管native app在开发上需要更多时间，但却带来了更好的用户体验(页面渲染、手势操作的流畅性)，也正是基于这两点Facebook在2015年推出了React-NativeWhat we really w

1.定义组件有两个要求：组件名称必须以大写字母开头组件的返回值只能有一个根元素2.函数组件function Welcome (props) { return <h1>Welcome {props.name}</h1>}ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));数组件接收一个单一的 props 对象并返回了一个React元素操作非常简单能

1:准备工作父组件(APP) 子组件(Header)改写index.js中APP内容2:数据传递的说明3:回到子组件(Header.js)4:如果调试看props 回到index.js中新增数据的传递 ps:useage 不是userage 少了一个r5:如果查看 回到Header.js中 加入红色框的内容 重新运行 就可以浏览器中查看结果6:结果如下...

react中是单向数据流，父级组件向子级传值如下图：就是把父级的一些值引入子组件标签中，直接定义传出，子组件在props中接收如何把子组件的数据传回父组件呢？就需要使用函数在子组件中调用，通过函数传给父组件。如下图：先在父组件定义函数，并传递给子组件子组件在props中接收到这个函数，调用这个函数把子组件的数据传给父级。如下图：...

1:在src中新建了三个子组件分别为Header Content Footer2:在里面分别写入代码 建议用rcc快捷方式Header.js中import React, { Component } from 'react'var HeaderStyle = { color:"red"} export default class Header extends Compon...

1:准备工作在VSCode中安装es7插件 然后重启编译器生效2:在src中新建一个js文件取名header.js 然后使用快捷方式rcc ps:rcc是class组件 rfc是函数组件3:在index.js中使用header组件4:改造函数APP组件变成class组件5:完成以后记得保存 运行启动命令 npm run start 注意命令是否在项目目录中 ...

1:研究欢迎学习react替代性 本质就是一个函数 函数可以调用 接收参数 并且有返回值2:拆分代码如下 普通的声明函数 结果跟之前一样3:函数的参数使用4:将函数变成组件的方式调用...

1:准备工作 node的安装 没有的可以去官网根据自己的电脑下载(http://nodejs.cn/download/)2:运行命令 npx create-react-app react-test3:了解基本的rect组成react 基本的语法 判断 循环 变量react-dom 页面的操作react-scripts 针对项目的...