随笔分类 -  框架react.js

摘要:1、table表单,开启复选框时,多选删除,删除成功之后需要清除之前已选择的部分。此时需要给table一个 rowSelection属性,属性值里面使用selectedRowKeys和onChange配合使用 并在删除成功后将selectedRowKeys属性值清空即可selectedRowKeys 阅读全文
posted @ 2020-07-29 11:04 极客小乌龟 阅读(1014) 评论(0) 推荐(0) 编辑
摘要:A question in React+TypeScript+WebPack with typings-for-css-modules-loader在做项目支持css module时,使用typings-for-css-modules-loader处理css,会出现编译报错 Uncaught Err 阅读全文
posted @ 2020-05-23 14:58 极客小乌龟 阅读(2785) 评论(0) 推荐(0) 编辑
摘要:ant-design地址打不开,可能和网络有关,用下面的镜像地址就可以打开 ant-design-pro镜像地址: http://ant-design-pro.gitee.io/index-cn antd-mobile镜像地址: https://antd-mobile.gitee.io/index- 阅读全文
posted @ 2020-05-22 15:20 极客小乌龟 阅读(4250) 评论(0) 推荐(2) 编辑
摘要:创建react项目 create-react-app mobx-demo cd my-app npm run start 使用react-app-rewired npm install customize-cra react-app-rewired @babel/plugin-proposal-de 阅读全文
posted @ 2020-05-06 17:27 极客小乌龟 阅读(537) 评论(0) 推荐(0) 编辑
摘要:let nameSub = "xx"; //类型推论 let title: string; //类型注解 // nameSub = 2; // title = 4; title = "TS"; // 数组类型 let names: string[]; names = ['tom','mary']; 阅读全文
posted @ 2020-02-19 22:14 极客小乌龟 阅读(193) 评论(0) 推荐(0) 编辑
摘要:高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中. 作用:把不是通过路由切换过来的组件,将react-router 的 history、locatio 阅读全文
posted @ 2020-02-18 21:05 极客小乌龟 阅读(1279) 评论(0) 推荐(0) 编辑
摘要:1、 组件使用一个特殊的 children prop 来将他们的子组件传递到自己的渲染结果中: 这使得别的组件可以通过 JSX 嵌套,将任意组件作为子组件传递给它们 function FancyBorder(props) { return ( <div className={'FancyBorder 阅读全文
posted @ 2020-02-10 21:41 极客小乌龟 阅读(266) 评论(0) 推荐(0) 编辑
摘要:当你遇到需要同时获取多个子组件数据,或者两个组件之间需要相互通讯的情况时,需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。 然后把父组件修改state的函数传递给子组件, 阅读全文
posted @ 2020-02-10 21:01 极客小乌龟 阅读(184) 评论(0) 推荐(0) 编辑
摘要:1、受控组件 由于在表单元素上设置了 value 属性,因此显示的值将始终为 this.state.value,这使得 React 的 state 成为唯一数据源。 由于 handlechange 在每次按键时都会执行并更新 React 的 state,state每次更新,render函数都会执行, 阅读全文
posted @ 2020-02-10 20:45 极客小乌龟 阅读(216) 评论(0) 推荐(0) 编辑
摘要:思路:使用map函数将数组转化成列表,map函数是返回一个新的数组,并不会改变原来的数组 并且react在渲染数组时,会将元素拼接进行渲染,所以会将数组展开渲染 1、通过使用 {} 在 JSX 内构建一个元素集合。 const numbers = [1, 2, 3, 4, 5]; const lis 阅读全文
posted @ 2020-02-10 20:26 极客小乌龟 阅读(226) 评论(0) 推荐(0) 编辑
摘要:1、函数式组件的条件渲染 function UserGreeting(props) { return <h1>Welcome back!</h1>; } function GuestGreeting(props) { return <h1>Please sign up.</h1>; } functi 阅读全文
posted @ 2020-02-10 20:12 极客小乌龟 阅读(195) 评论(0) 推荐(0) 编辑
摘要:react事件和原生HTML的区别: 1、React 事件的命名采用小驼峰式(camelCase),而不是纯小写。(例如onClick="") 2、使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。(例如onClick={activateLasers}) 3、在 React  阅读全文
posted @ 2020-02-10 18:56 极客小乌龟 阅读(188) 评论(0) 推荐(0) 编辑
摘要:1、State 与 props 类似,都是组件使用的数据,但是 state 是私有的,并且完全受控于当前组件,即可修改。 2、组件中的render函数 在组件初始化时会调用一次,并且在组件更新的每一次都会执行一次,即state变更时,所以总是渲染最新的组件状态state,以达到响应式渲染 3、组件的 阅读全文
posted @ 2020-02-10 18:53 极客小乌龟 阅读(220) 评论(0) 推荐(0) 编辑
摘要:1、组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。即他返回的是React元素,是可以放到JSX语法中使用的元素。 2、组件类型,根据书写方式分为函数组件和class组件: // 函数式组件 function 阅读全文
posted @ 2020-02-10 17:46 极客小乌龟 阅读(160) 评论(0) 推荐(0) 编辑
摘要:1、元素渲染 想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render(): const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById 阅读全文
posted @ 2020-02-10 17:34 极客小乌龟 阅读(121) 评论(0) 推荐(0) 编辑
摘要:1、此处应用了三个库,必须首先加载,react.js是核心库,react-dom.js是提供与DOM相关的功能,babel.js的作用是将JSX语法转换为JavaScript语法,script标签加上type="text/babel"属性 2、ReactDOM.render是React的最基本的方法 阅读全文
posted @ 2020-02-10 16:19 极客小乌龟 阅读(227) 评论(0) 推荐(0) 编辑
摘要:初学React,记录一下开发工具react-developer-tools的安装和使用 1、下载react-developer-tools,谷歌下载.crx后缀的文件,火狐下载.xpi后缀的文件。 由于需要FQ,此处提供一下分享地址,只供Chrome使用: 链接:https://pan.baidu. 阅读全文
posted @ 2020-02-02 21:51 极客小乌龟 阅读(1800) 评论(0) 推荐(0) 编辑
摘要:DOM 向JSX的演进 网页由 DOM 元素构成。React DOM 并不是浏览器的 DOM,而React DOM 只是用来告诉浏览器如何创建 DOM 的方法。通常情况下,我们并不需要 React 就能创建出一个 DOM 元素,但是 React 创建与管理 DOM 的方式有组件化、虚拟 DOM 等更 阅读全文
posted @ 2019-07-31 11:39 极客小乌龟 阅读(2405) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示