BradyCC的博客

动态获取浏览器窗口的宽、高// HookCustomFunction.tsximport * as React from 'react';const useWinSize = () => { const [ size, setSize ] = React.useState({ width: document.documentElement.clientWidth, ...

// HookFunction.tsximport * as React from 'react';import HookShowArea from './HookShowArea';import HookOperateButton from './HookOperateButton';import { Color } from './Color';const HookFunction...

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。useStateuseEffectcreateContextuseContextuseReducer// Hook.tsximport * as React from 'react';import './hook.css';import ...

react-router-dom 实现路由切换，前期已经安装过 react-router-dom。这里增加 store 状态绑定。// AppRouterLayout.tsximport * as React from 'react';import { BrowserRouter as Router, Link } from 'react-router-dom';// eslint-d...

react-router-dom 实现路由切换，前期已经安装过 react-router-dom。这里增加 store 状态绑定。import * as React from 'react';import { HashRouter, Route, Switch } from 'react-router-dom';import { Provider } from "react-redux"...

使用 redux 进行统一状态管理，实现 todolist 功能// views/todolist/TodoList.tsximport * as React from 'react';import { connect } from 'react-redux';import { inputValueAction, addListAction, deleteListAction, get...

使用 redux 进行统一状态管理，实现 todolist 功能# 安装 redux react-reduxyarn add redux react-redux @types/react-redux# 安装 redux-devtools-extensionyarn add redux-devtools-extension @types/redux-devtools-extension...

使用 redux 进行统一状态管理，实现 todolist 功能// views/todolist/TodoList.tsximport * as React from 'react';import { connect } from 'react-redux';import { inputValueAction, addListAction, deleteListAction, get...

使用 redux 进行统一状态管理，实现 todolist 功能# 安装 redux react-reduxyarn add redux react-redux @types/react-redux# 安装 redux-devtools-extensionyarn add redux-devtools-extension @types/redux-devtools-extension...

组件化拆分，易于复用、扩展、维护。父子组件传参使用属性子组件使用PropTypes进行类型校验子组件调用父组件方法默认属性设置// Demoimport React, { Component, Fragment } from 'react';import DemoItem from './DemoItem';class Demo extends Component<...

数据绑定、双向数据绑定、路由跳转、事件、数据遍历、渲染、HTML解析、注释import React, { Component, Fragment } from 'react';class Demo extends Component<any, any> { // 构造函数 constructor(props: any) { super(props); ...

使用 react-router-dom 配置路由安装 react-router-dom# 安装yarn add react-router-dom创建路由// AppRouter.tsximport React, {Component} from 'react';import {HashRouter, Route, Switch} from 'react-router-d...

React 是一个用于构建用户界面的 JavaScript 库。使用 create-react-app 创建项目# 全局安装 create-react-appyarn add global create-react-appnpm i create-react-app -g# 查看版本create-react-app --version# 使用 typescript 模板创建项目...