react - 随笔分类(第3页) - Tsunami黄嵩粟

react表单处理受控组件

摘要：将state与表单项中的value值绑定在一起，有state的值来控制表单元素的值，称为受控组件。绑定步骤：在state中添加一个状态，作为表单元素的value值给表单元素绑定change事件，将表单元素的值设置为state的值 <input type="text" value={this.s 阅读全文

posted @ 2021-04-16 17:08 Tsunami黄嵩粟阅读(79) 评论(0) 推荐(0)

react props-type

摘要：对于组件来说，props是外部传入的，无法保证组件使用者传入什么格式的数据，简单来说就是组件调用者可能不知道组件封装着需要什么样的数据，如果传入的数据不对，可能会导致程序异常，所以必须要对于props传入的数据类型进行校验。安装校验包 npm i -S prop-types # 在组件中导入 im 阅读全文

posted @ 2021-04-16 16:37 Tsunami黄嵩粟阅读(326) 评论(0) 推荐(0)

react props进阶 children属性

摘要：children属性，表示组件标签的子节点，当组件标签有子节点时，props就会有该属性，与与普通的props一样，其值可以使任意类型。 # 父组件 class App extends React.Component { render() { return ( <div> <Cmp>我是childr 阅读全文

posted @ 2021-04-16 16:19 Tsunami黄嵩粟阅读(415) 评论(0) 推荐(0)

React State状态

摘要：state状态只在class类组件才有，函数组件没有此功能状态(state)即数据，是组件内部的私有数据，只能在组件内部使用 state的值是对象，表示一个组件中可以有多个数据通过this.state来获取状态 state数据值可以修改 this.setState state可以定义在类的构造方阅读全文

posted @ 2021-04-16 15:49 Tsunami黄嵩粟阅读(49) 评论(0) 推荐(0)

react this指向问题

摘要：在JSX事件函数方法中的 this，默认不会绑定 this指向。如果你忘记绑定，当你调用这个函数的时候 this 的值为 undefined。所以使用时一定要绑定好this的指向。构造方法中绑定 constructor(props){ super(props) // 在构造方法中指定this指向阅读全文

posted @ 2021-04-16 15:41 Tsunami黄嵩粟阅读(54) 评论(0) 推荐(0)

React事件处理事件绑定事件对象

摘要：React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同: React 事件的命名采用小驼峰式，而不是纯小写。 onClick onChange 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 onClick={this.fn} 类组件与函数组件绑定事件阅读全文

posted @ 2021-04-16 15:28 Tsunami黄嵩粟阅读(130) 评论(0) 推荐(0)

react类组件组件传值

摘要：class Cmp1 extends React.Component{ render(){ return ( <div>{ this.props.name } -- 我是一个类</div> ); }} 父组件 // react根组件 import React, { Component } from 阅读全文

posted @ 2021-04-16 15:22 Tsunami黄嵩粟阅读(101) 评论(0) 推荐(0)

react组件传值(props[只读属性]) 函数组件

摘要：组件间传值，在React中是通过只读属性 props 来完成数据传递的。 props：接受任意的入参，并返回用于描述页面展示内容的 React 元素。 function Cmp1(props) { return ( <div> <h3>{ props.name } -- 你好世界</h3> </di 阅读全文

posted @ 2021-04-16 15:10 Tsunami黄嵩粟阅读(508) 评论(0) 推荐(0)

react类组件

摘要：使用ES6语法的class创建的组件(有状态组件) 类名称必须要大写字母开头类组件要继承React.Component父类，从而可以使用父类中提供的方法或者属性类组件必须提供 render 方法，用于页面结构渲染，结构必须要有顶级元素，且必须return去返回 import React from 阅读全文

posted @ 2021-04-16 11:45 Tsunami黄嵩粟阅读(52) 评论(0) 推荐(0)

组件的创建方式函数创建组件

摘要：函数组件(无状态组件)：使用JS的函数创建组件函数名称必须以大写字母开头，函数组件必须有返回值，表示该组件的结构，且内容必须有顶级元素 import React from 'react' // 函数名首字母必须大写 function Hello() { return ( <div>这是第一个函数阅读全文

posted @ 2021-04-16 11:31 Tsunami黄嵩粟阅读(120) 评论(0) 推荐(0)

React脚手架创建React项目

摘要：React团队主要推荐使用create-react-app来创建React新的单页应用项目的最佳方式。 React脚手架(create-react-app)意义脚手架是官方提供，零配置，无需手动配置繁琐的工具即可使用充分利用 Webpack，Babel，ESLint等工具辅助项目开发关注业务，阅读全文

posted @ 2021-04-16 11:25 Tsunami黄嵩粟阅读(74) 评论(0) 推荐(0)

通过Webpack搭建react

摘要：安装解析react的相关babel和插件 nmp i -D babel-loader @babel/core @babel/preset-react @babel/preset-env 进行loader相关配置 // node运行环境 // 开发环境webpack配置 const path = re 阅读全文

posted @ 2021-04-16 11:21 Tsunami黄嵩粟阅读(78) 评论(0) 推荐(0)

react 数组列表

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hell worl 阅读全文

posted @ 2021-03-04 15:57 Tsunami黄嵩粟阅读(135) 评论(0) 推荐(0)

react 属性绑定动态值

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hell worl 阅读全文

posted @ 2021-03-04 15:26 Tsunami黄嵩粟阅读(452) 评论(0) 推荐(0)

React jsx中js表达式

摘要：嵌入JS表达式在jsx语法中，要把JS代码写到{ }中，所有标签必须要闭合。 let num = 100 let bool = false; // JSX 语法 var myh1 = ( <div> {/* 我是注释 */} {num} <hr /> {/* 三目运算 */} {true ? "条阅读全文

posted @ 2021-02-25 18:49 Tsunami黄嵩粟阅读(87) 评论(0) 推荐(0)

React JSX

摘要：由于通过React.createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。 React使用 JSX 来替代常规的JavaScript，JSX 可以理解为的JavaScript语法扩展，它里面的标签申明要符合X 阅读全文

posted @ 2021-02-25 17:48 Tsunami黄嵩粟阅读(84) 评论(0) 推荐(0)

React

摘要：官网：https://react.docschina.org/ React 起源于 Facebook(脸书) 的内部项目，它是一个用于构建用户界面的 javascript 库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。 React 拥有较高的性能，代码逻辑非常简阅读全文

posted @ 2021-02-25 15:59 Tsunami黄嵩粟阅读(285) 评论(0) 推荐(0)

随笔分类 - react