Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

0 篇文章

  每天 30 秒系列之 React

精选有用的React片段,帮助你获取最佳实践Array列表数据表格数据表格数据映射Hook使用内部点击使用外部点击使用fetch请求使用间隔使用浏览器端识别使用延迟Inputinput传值给父组件限制textarea输入的长度单词个数限制多选列表向父组件传值显示密码框内容下拉列表向父组建传值滑动元素向父组件传值文本输入框向父组件传值输入框向父组件直接传值VisualTODO返回总目录每天30秒系列译

React Input - 限制 textarea 输入的长度

2019-09-10描述渲染一个字符受到限制的textarea组件。使用React.useState()hook创建一个content状态变量并设置他的值为value。创建一个setFormattedContent方法,当长度大于limit时可以对其进行截断使用React.useEffect()hook来调用参数为content状态变量的setFormattedContent方法让一个<textar

React Hooks - 使用延迟

2019-09-06描述一个使用声明方式实现的setTimeouthook。创建一个接受callback和delay的自定义hook使用React.useRef()hook为回调函数创建一个ref使用React.useEffect()hook记录最近的一次回调使用Rect.useEffect()hook执行和清除timeout实现constuseTimeout=(callback,delay)=>{

React Hooks - 使用浏览器端识别

2019-09-05描述一个可以检查代码代码运行在浏览器端还是服务端的hook。创建一个可以返回适当对象的自定义hook,使用typeofwindow,window.document和window.document.createElement来检查代码是否运行在浏览器中使用React.useState()hook定义inBrowser状态变量使用React.useEffect()hook来更新inB

React Hooks - 使用间隔

2019-09-04描述用声明的方式实现一个setIntervalhook。创建一个接受callback和delay的自定义hook使用React.useRef()hook为回调方法创建一个ref使用React.useEffect()hook记住最后一个回调使用Rect.useEffect()hook设置和清除interval实现constuseInterval=(callback,delay)=>

React Hooks - 使用 fetch 请求

2019-09-03描述以声明的方式实现一个fetchhook创建一个接受url和options的自定义hook使用React.useState()hook初始化response和error状态变量使用React.useEffect()hook用同步的方式调用fetch()并更新变量状态返回一个包含response和error状态变量的对象实现constuseFetch=(url,options)=

React Hooks - 使用外部点击

2019-09-02描述一个hook,可以处理包装在组建外部的点击事件。创建一个自定义的hook,使用ref和callback来处理click事件使用React.useEffect()hook来添加或清除click事件使用React.useRef()hook为你的点击组建创建一个ref,并将他作为参数传递给useClickInsidehook实现constuseClickOutside=(ref,c

React Hooks - 使用内部点击

2019-08-30描述一个hook,可以处理包装在组建内部的点击事件。创建一个自定义的hook,使用ref和callback来处理click事件使用React.useEffect()hook来添加或清除click事件使用React.useRef()hook为你的点击组建创建一个ref,并将他作为参数传递给useClickInsidehook实现constuseClickInside=(ref,ca

React Array - 表格数据映射

2019-08-29描述使用对象数组和属性名称列表渲染一个动态创建行的表格。使用Object.keys(),Array.prototype.filter(),Array.prototype.includes()和Array.prototype.reduce()得到一个filteredData数组,使其数组中的每一个对象中都包含propertyNames中所指定的key值渲染一个<table>元素,表

React Array - 表格数据

2019-08-28描述根据原生数组动态渲染一个带行的表格。渲染一个带有两列(IDandValue)的<table>元素使用Array.prototype.map渲染data中的每一项作为一个<tr>元素,该元素包含了索引和值。使用索引和值的组合作为key实现functionDataTable({data}){return(<table><thead><tr><th>ID</th><th>Value

React Array - 列表数据

2019-08-27描述使用一个原始数组中的数据渲染出一个列表元素。使用isOrdered属性值来判断渲染的是<ol>列表,还是<ul>列表使用Array.prototype.map渲染data中的每一项作为一个<li>元素,根据每一项的索引和值生成一个keyisOrdered属性的默认值为false,使用<ul>列表进行渲染实现functionDataList({isOrdered,data}){

介绍 React 中的 Refs 及其使用场景?

2019-03-17回答Refs提供了一种方式,用于访问在render方法中创建的React元素或DOM节点。Refs应该谨慎使用,但是如下一些场景使用Refs却更为适合:处理焦点、文本选择或者媒体的控制触发必要的动画集成第三方DOM库Refs是使用React.createRef()方法创建的,他通过ref属性附加到React元素上。要在整个组件中使用Refs,需要将ref在构造函数中分配给其实例属