2019-10-12 描述渲染一个当点击后有波浪动画效果的按钮。为波浪效果定义一些适当的 CSS 样式和动画使用 React.useState()hook 为坐标和按钮的动画状态创建变量使用 React.useEffect()hook 来更新动画状态，每当坐标状态变量修改时，就开始进行动画在动画播放结束后，使用前一个 hook 中的 UsesetTimeout()来对动画进行清除每当 isRippling 状态变量为 fal
2019-10-11 描述渲染一个可通过事件控制的弹窗组件。使用该组件时，只需要 importModal 一次，然后通过传递给 isVisible 属性的一个布尔值来进行显示。使用对象解构为弹窗组件的特定属性设置默认值定义一个处理所有键盘事件的方法 keydownHandler，他可以根据你的需要进行操作（如：当按下 Esc 时关闭弹窗组件）使用 UseReact.useEffect()hook 对键盘监听事件进行添加
2019-10-10 描述渲染一个可以发送邮件的格式化的链接。解构组件中的属性，使用 email，subject 和 body 创建一个拥有适当 href 属性的 <a> 元素使用 props.children 作为链接内容进行渲染实现 functionMailto({email,subject,body,...props}){return(<ahref={`mailto:${email}?subject=${encode
2019-10-09 描述创建一个旋转加载的组件。为组件中的元素定义适当的 CSS 样式和动画定义一个组件，返回一个简单的 SVG，其大小可以通过 size 属性进行设置当然，你也可以直接使用 CSS 动画 🍩 式的旋转来实现实现.loader{animation:rotate2slinearinfinite;}@keyframesrotate{100%{transform:rotate(360deg);}}.load
2019-10-08 描述渲染一个单个文件的拖拽组件。为组件创建一个名为 dropRef 的 ref 使用 React.useState()hook 创建 drag 和 filename 变量，分别初始化为 false 和''。dragCounter 和 drag 变量用于检测一个文件是否正在被拖拽，而 filename 用于存储被拖拽后的文件的名称创建 handleDrag，handleDragIn，handleDragOut 和 han
2019-09-30 回答[1,NaN,3]加分回答 parseInt(string,radix)将一个字符串转换为 radix 进制的整数。如果 string 无法被转化成数值类型将会返回 NaN。radix 为介于 2-36 之间的整数，通常默认值为 10，始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。很多 lint 工具都会默认开启此项的校验 map 在每次迭代时都会将 value，index，array 三
2019-09-29 描述渲染一个倒数计时器，当其为 0 时打印一条消息。使用对象解构设置默认的 hours、minutes 和 seconds 属性使用 React.useState()hook 创建 time、paused 和 over 状态变量，他们的默认值分别为传入的属性、false 和 false 创建一个 tick 方法，基于当前的值更新 time 值（如：每次减少 1 秒）如果 paused 或者 over 的值为 true，tick 方法
2019-09-27 描述渲染一个内容可折叠的组件。使用 React.setState()hook 创建一个 isCollapsed 状态变量，其默认值为 props.collapsed 使用一个 style 对象分别为组件保存各自的样式和他们的状态使用一个 <div> 将改变组件 isCollapsed 状态的 <button> 及通过 props.children 传递的内容的 <div> 进行包裹基于 isCollapsed 应用 st
2019-09-26 描述渲染一个轮播组件。使用 React.setState()hook 创建一个 active 状态变量，设置默认值为 0(第一个元素的索引).使用一个 style 对象分别为组件保存各自的样式使用 React.useEffect()hook 更新 active 值为下一个元素的索引，可以使用 setInterval 解构 props，根据 active 和 index 对轮播组件中的每一项进行可见样式的设置，并将其
2019-09-25 描述渲染一个字符串做为纯文本，并将其中的 URL 部分转换为一个 <a> 元素。使用 String.prototype.split()和带正则表达式的 String.prototype.match()来找出文本中的 URL 返回一个 <React.Fragment>，将匹配的 URL 渲染为一个 <a> 元素，如果必要的话对缺失的协议前缀进行处理，剩余的字符串做为纯文本进行渲染实现 functionAuto
2019-09-24 描述根据 type 属性来创建不同的提示组件。为组件中的元素定义适当的 CSS 样式和动画使用 React.setState()hook 创建 isShown 和 isLeaving 状态变量，并设置他们的默认值为 false 定义 timeoutId 用来保存计时器实例，以便在组件卸载时进行清除使用 React.setEffect()hook 更新 isShown 的值为 true，当组件卸载时清除使用过的 time
2019-09-23 描述渲染一个包含多个可折叠内容组件的手风琴菜单。定义一个 AccordionItem 组件，并将其传递给 Accordion。除了在 props.children 中函数名称标识为 AccordionItem 的节点外移除其余不必要的节点每一个 AccordionItem 组件都渲染一个 <button>，通过 props.handleClick 回调和传递到组件中的内容 props.children 来更
2019-09-20 描述渲染一个可以使用回调函数将值传递给父组件的 <input> 元素。使用对象解构为 <input> 元素的特定属性设置默认值渲染一个包含适当属性的 <input> 元素，在 onChange 事件中使用 callback 函数将输入框的值传递给父组件实现 functionUncontrolledInput({callback,type='text',disabled=false,readOnly=f
2019-09-19 描述渲染一个可以使用回调函数将值传递给父组件的 <textarea> 元素。使用对象解构为 <textarea> 元素的特定属性设置默认值渲染一个包含适当属性的 <textarea> 元素，在 onChange 事件中使用 callback 函数将文本框的值传递给父组件实现 functionTextArea({callback,cols=20,rows=2,disabled=false,readOnl
2019-09-18 描述渲染一个可以使用回调函数将值传递给父组件的滑动元素。使用对象解构为 <input> 元素的特定属性设置默认值渲染一个类型为"range"、包含适当属性的 <input> 元素，在 onChange 事件中使用 callback 函数将输入框的值传递给父组件实现 functionSlider({callback,disabled=false,readOnly=false}){return(<in
2019-09-17 描述渲染一个 <select> 元素，可以使用回调函数将值传递给父组建。使用对象解构对 <select> 元素中的某些属性进行默认值设置根据传入的属性渲染一个 <select> 元素，在 onChange 事件中使用 callback 函数将选中的值传递给父元素使用 values 数组中每一项解构为 value 和 text 的数据来渲染 option 元素，并通过 <select> 元素中定义的初始值 value 来设置
2019-09-16 描述渲染一个带有显示按钮的密码输入框。使用 React.useState()hook 创建一个 shown 状态变量并设置他的值为 false 将 <input> 和 <button> 元素包裹在一个 <div> 中，通过按钮对输入框的"text"和"password"类型进行切换实现 functionPasswordRevealer({value}){const[shown,setShown]=Reac
2019-09-12 描述渲染一个多选框列表，可以使用回调函数向父组件传递被选中的一个或多个值。使用 React.setState()创建一个 data 状态变量，设置 options 属性为他的始化值创建一个 toggle 方法，可以使用列表中 checked 的选中与否来更新 data 状态变量，可以调用组件属性中的 onChange 回调渲染一个 <ul> 元素，使用 Array.prototype.map()对 data 状态变
2019-09-11 描述渲染一个带有单词个数限制功能的 textarea 组件。使用 React.useState()hook 创建 content 和 wordCount 状态变量，他们的值分别设为 value 和 0 创建一个 setFormattedContent 方法，使用 String.prototype.split('')把输入的内容转换为一个单词数组并检查使用了 Array.prototype.filter(Bool
2019-09-10 描述渲染一个字符受到限制的 textarea 组件。使用 React.useState()hook 创建一个 content 状态变量并设置他的值为 value。创建一个 setFormattedContent 方法，当长度大于 limit 时可以对其进行截断使用 React.useEffect()hook 来调用参数为 content 状态变量的 setFormattedContent 方法让一个 <textar