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

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

React Visual - 自动计数器

2019-10-15 描述渲染一个自动计数器组件。使用 React.useState()hook 初始化一个默认值为 0 的状态变量 ticker 定义一个 tick 方法,他将基于 interval 间隔进行增长,直到增长为 timer 定义一个 reset 方法,他将重置 ticker 为 0 并清除 interval 返回一个包含两个 <button> 元素的 <div>,其按钮分别调用 tick 和 reset 方法实现 functionTicke

React Visual - Tab 组件

2019-10-14 描述渲染一个 Tab 菜单及其视图组件。定义一个 TabItem 组件,可以传递给 Tab 且只接受 props.children 中通过函数名称认证的 TabItem,其余节点需要进行移除使用 React.useState()hook 初始化 bindIndex 状态变量的值为 props.defaultIndex 使用 Array.prototype.map 将收集的节点渲染为 tab-menu 和 tab-vie

有黑客想改变身份成画家么

想变为画家嘛?想在黑客和画家之间变来变去么?大概什么情况会触发你转变身份?很多年过去了,随着社区的成长,该服务已经停止。请挖坟的小伙伴们不要再进行打赏了,否则后果自负。

React Visual - 星级比率组件

2019-10-13 描述渲染一个星级比率组件。定义一个组件,每颗星星都根据父组件的状态单独调用 Star 进行渲染显示在 StarRating 组件中使用 React.useState()hook 定义 rating 和 selection 状态变量,并分别初始化他们的值为 props.rating(如果无效或不支持时为 0)和 0 创建一个 hoverOver 方法,通过提供的 event 来更新 selected 和 rating 使用 A

React Visual - 带波浪效果的按钮

2019-10-12 描述渲染一个当点击后有波浪动画效果的按钮。为波浪效果定义一些适当的 CSS 样式和动画使用 React.useState()hook 为坐标和按钮的动画状态创建变量使用 React.useEffect()hook 来更新动画状态,每当坐标状态变量修改时,就开始进行动画在动画播放结束后,使用前一个 hook 中的 UsesetTimeout()来对动画进行清除每当 isRippling 状态变量为 fal

React Visual - 弹窗组件

2019-10-11 描述渲染一个可通过事件控制的弹窗组件。使用该组件时,只需要 importModal 一次,然后通过传递给 isVisible 属性的一个布尔值来进行显示。使用对象解构为弹窗组件的特定属性设置默认值定义一个处理所有键盘事件的方法 keydownHandler,他可以根据你的需要进行操作(如:当按下 Esc 时关闭弹窗组件)使用 UseReact.useEffect()hook 对键盘监听事件进行添加

React Visual - 邮件发送组件

2019-10-10 描述渲染一个可以发送邮件的格式化的链接。解构组件中的属性,使用 email,subject 和 body 创建一个拥有适当 href 属性的 <a> 元素使用 props.children 作为链接内容进行渲染实现 functionMailto({email,subject,body,...props}){return(<ahref={`mailto:${email}?subject=${encode

React Visual - 旋转加载组件

2019-10-09 描述创建一个旋转加载的组件。为组件中的元素定义适当的 CSS 样式和动画定义一个组件,返回一个简单的 SVG,其大小可以通过 size 属性进行设置当然,你也可以直接使用 CSS 动画 🍩式的旋转来实现实现.loader{animation:rotate2slinearinfinite;}@keyframesrotate{100%{transform:rotate(360deg);}}.load

React Visual - 文件的拖拽

2019-10-08 描述渲染一个单个文件的拖拽组件。为组件创建一个名为 dropRef 的 ref 使用 React.useState()hook 创建 drag 和 filename 变量,分别初始化为 false 和''。dragCounter 和 drag 变量用于检测一个文件是否正在被拖拽,而 filename 用于存储被拖拽后的文件的名称创建 handleDrag,handleDragIn,handleDragOut 和 han

['1', '7', '11'].map(parseInt) 的输出结果是?

2019-09-30 回答[1,NaN,3]加分回答 parseInt(string,radix)将一个字符串转换为 radix 进制的整数。如果 string 无法被转化成数值类型将会返回 NaN。radix 为介于 2-36 之间的整数,通常默认值为 10,始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。很多 lint 工具都会默认开启此项的校验 map 在每次迭代时都会将 value,index,array 三

React Visual - 时钟倒数计时器 (advanced)

2019-09-29 描述渲染一个倒数计时器,当其为 0 时打印一条消息。使用对象解构设置默认的 hours、minutes 和 seconds 属性使用 React.useState()hook 创建 time、paused 和 over 状态变量,他们的默认值分别为传入的属性、false 和 false 创建一个 tick 方法,基于当前的值更新 time 值(如:每次减少 1 秒)如果 paused 或者 over 的值为 true,tick 方法

React Visual - 折叠组件

2019-09-27 描述渲染一个内容可折叠的组件。使用 React.setState()hook 创建一个 isCollapsed 状态变量,其默认值为 props.collapsed 使用一个 style 对象分别为组件保存各自的样式和他们的状态使用一个 <div> 将改变组件 isCollapsed 状态的 <button> 及通过 props.children 传递的内容的 <div> 进行包裹基于 isCollapsed 应用 st

React Visual - 轮播组件

2019-09-26 描述渲染一个轮播组件。使用 React.setState()hook 创建一个 active 状态变量,设置默认值为 0(第一个元素的索引).使用一个 style 对象分别为组件保存各自的样式使用 React.useEffect()hook 更新 active 值为下一个元素的索引,可以使用 setInterval 解构 props,根据 active 和 index 对轮播组件中的每一项进行可见样式的设置,并将其

React Visual - 文本自动转链接 (advanced)

2019-09-25 描述渲染一个字符串做为纯文本,并将其中的 URL 部分转换为一个 <a> 元素。使用 String.prototype.split()和带正则表达式的 String.prototype.match()来找出文本中的 URL 返回一个 <React.Fragment>,将匹配的 URL 渲染为一个 <a> 元素,如果必要的话对缺失的协议前缀进行处理,剩余的字符串做为纯文本进行渲染实现 functionAuto

React Visual - 提示组件

2019-09-24 描述根据 type 属性来创建不同的提示组件。为组件中的元素定义适当的 CSS 样式和动画使用 React.setState()hook 创建 isShown 和 isLeaving 状态变量,并设置他们的默认值为 false 定义 timeoutId 用来保存计时器实例,以便在组件卸载时进行清除使用 React.setEffect()hook 更新 isShown 的值为 true,当组件卸载时清除使用过的 time

React Visual - 手风琴 (advanced)

2019-09-23 描述渲染一个包含多个可折叠内容组件的手风琴菜单。定义一个 AccordionItem 组件,并将其传递给 Accordion。除了在 props.children 中函数名称标识为 AccordionItem 的节点外移除其余不必要的节点每一个 AccordionItem 组件都渲染一个 <button>,通过 props.handleClick 回调和传递到组件中的内容 props.children 来更

React Input - 输入框向父组件直接传值

2019-09-20 描述渲染一个可以使用回调函数将值传递给父组件的 <input> 元素。使用对象解构为 <input> 元素的特定属性设置默认值渲染一个包含适当属性的 <input> 元素,在 onChange 事件中使用 callback 函数将输入框的值传递给父组件实现 functionUncontrolledInput({callback,type='text',disabled=false,readOnly=f

React Input - 文本输入框向父组件传值

2019-09-19 描述渲染一个可以使用回调函数将值传递给父组件的 <textarea> 元素。使用对象解构为 <textarea> 元素的特定属性设置默认值渲染一个包含适当属性的 <textarea> 元素,在 onChange 事件中使用 callback 函数将文本框的值传递给父组件实现 functionTextArea({callback,cols=20,rows=2,disabled=false,readOnl

React Input - 滑动元素向父组件传值

2019-09-18 描述渲染一个可以使用回调函数将值传递给父组件的滑动元素。使用对象解构为 <input> 元素的特定属性设置默认值渲染一个类型为"range"、包含适当属性的 <input> 元素,在 onChange 事件中使用 callback 函数将输入框的值传递给父组件实现 functionSlider({callback,disabled=false,readOnly=false}){return(<in

React Input - 下拉列表向父组建传值

2019-09-17 描述渲染一个 <select> 元素,可以使用回调函数将值传递给父组建。使用对象解构对 <select> 元素中的某些属性进行默认值设置根据传入的属性渲染一个 <select> 元素,在 onChange 事件中使用 callback 函数将选中的值传递给父元素使用 values 数组中每一项解构为 value 和 text 的数据来渲染 option 元素,并通过 <select> 元素中定义的初始值 value 来设置