React Input - input 传值给父组件 2019-09-09 描述使用内部声明的方式渲染一个 <input> 元素，让其可以使用回调函数将值传递给父亲组件。使用对象解构为 <input> 元素的某些属性设置默认值使用 React.setState()hook 创建一个 value 状态变量，给定值等于 defaultValue 的属性值使用第二个参数设置为 value 状态变量的 React.useEffect()hook，这样每当 value 更新时就可以对 callb 30Seconds React
React Hooks - 使用延迟 2019-09-06 描述一个使用声明方式实现的 setTimeouthook。创建一个接受 callback 和 delay 的自定义 hook 使用 React.useRef()hook 为回调函数创建一个 ref 使用 React.useEffect()hook 记录最近的一次回调使用 Rect.useEffect()hook 执行和清除 timeout 实现 constuseTimeout=(callback,delay)=>{ 30Seconds React
React Hooks - 使用浏览器端识别 2019-09-05 描述一个可以检查代码代码运行在浏览器端还是服务端的 hook。创建一个可以返回适当对象的自定义 hook，使用 typeofwindow，window.document 和 window.document.createElement 来检查代码是否运行在浏览器中使用 React.useState()hook 定义 inBrowser 状态变量使用 React.useEffect()hook 来更新 inB 30Seconds React
React Hooks - 使用间隔 2019-09-04 描述用声明的方式实现一个 setIntervalhook。创建一个接受 callback 和 delay 的自定义 hook 使用 React.useRef()hook 为回调方法创建一个 ref 使用 React.useEffect()hook 记住最后一个回调使用 Rect.useEffect()hook 设置和清除 interval 实现 constuseInterval=(callback,delay)=> 30Seconds React
React Hooks - 使用 fetch 请求 2019-09-03 描述以声明的方式实现一个 fetchhook 创建一个接受 url 和 options 的自定义 hook 使用 React.useState()hook 初始化 response 和 error 状态变量使用 React.useEffect()hook 用同步的方式调用 fetch()并更新变量状态返回一个包含 response 和 error 状态变量的对象实现 constuseFetch=(url,options)= 30Seconds React
React Hooks - 使用外部点击 2019-09-02 描述一个 hook，可以处理包装在组建外部的点击事件。创建一个自定义的 hook，使用 ref 和 callback 来处理 click 事件使用 React.useEffect()hook 来添加或清除 click 事件使用 React.useRef()hook 为你的点击组建创建一个 ref，并将他作为参数传递给 useClickInsidehook 实现 constuseClickOutside=(ref,c 30Seconds React
React Hooks - 使用内部点击 2019-08-30 描述一个 hook，可以处理包装在组建内部的点击事件。创建一个自定义的 hook，使用 ref 和 callback 来处理 click 事件使用 React.useEffect()hook 来添加或清除 click 事件使用 React.useRef()hook 为你的点击组建创建一个 ref，并将他作为参数传递给 useClickInsidehook 实现 constuseClickInside=(ref,ca 30Seconds React
React Array - 表格数据映射 2019-08-29 描述使用对象数组和属性名称列表渲染一个动态创建行的表格。使用 Object.keys()，Array.prototype.filter()，Array.prototype.includes()和 Array.prototype.reduce()得到一个 filteredData 数组，使其数组中的每一个对象中都包含 propertyNames 中所指定的 key 值渲染一个 <table> 元素，表 30Seconds React
React Array - 表格数据 2019-08-28 描述根据原生数组动态渲染一个带行的表格。渲染一个带有两列（IDandValue）的 <table> 元素使用 Array.prototype.map 渲染 data 中的每一项作为一个 <tr> 元素，该元素包含了索引和值。使用索引和值的组合作为 key 实现 functionDataTable({data}){return(<table><thead><tr><th>ID</th><th>Value 30Seconds React
React Array - 列表数据 2019-08-27 描述使用一个原始数组中的数据渲染出一个列表元素。使用 isOrdered 属性值来判断渲染的是 <ol> 列表，还是 <ul> 列表使用 Array.prototype.map 渲染 data 中的每一项作为一个 <li> 元素，根据每一项的索引和值生成一个 keyisOrdered 属性的默认值为 false，使用 <ul> 列表进行渲染实现 functionDataList({isOrdered,data}){ 30Seconds React
每天 30 秒系列之 React 精选有用的 React 片段，帮助你获取最佳实践 Array 列表数据表格数据表格数据映射 Hook 使用内部点击使用外部点击使用 fetch 请求使用间隔使用浏览器端识别使用延迟 Inputinput 传值给父组件限制 textarea 输入的长度单词个数限制多选列表向父组件传值显示密码框内容下拉列表向父组建传值滑动元素向父组件传值文本输入框向父组件传值输入框向父组件直接传值 Visual 手风琴 advanced 提示组件文本 30Seconds React
CSS 其他 - 自定义变量 2019-08-26 描述 CSS 变量包含在整个文档中可重复使用的特定值。HTML<pclass="custom-variables">CSSisawesome!</p>CSS:root{/*Placevariableswithinheretousethevariablesglobally.*/}.custom-variables{--some-color:#da7800;--some-keyword: 30Seconds CSS
CSS 其他 - 计数器 2019-08-23 描述计数器本质上是由 CSS 维护的变量，他的值可以通过 CSS 跟踪元素被使用的次数规则来进行递增。HTML<ul><li>Listitem</li><li>Listitem</li><li>Listitem<ul><li>Listitem</li><li>Listitem</li><li>Listitem</li></ul></li></ul>CSSul{counter-reset: 30Seconds CSS
CSS 其他 - Cacl() 2019-08-22 描述 calc()函数允许使用数学表达式来定义 CSS 值，采用数学表达式的结果作为属性值。HTML<divclass="box-example"></div>CSS.box-example{height:280px;background:#222url('https://image.ibb.co/fUL9nS/wolf.png')no-repeat;background-positi 30Seconds CSS
CSS 交互 - 可切换的开关 2019-08-21 描述使用纯 CSS 构建一个可切换的开关。HTML<inputtype="checkbox"id="toggle"class="offscreen"/><labelfor="toggle"class="switch"></label>CSS.switch{position:relative;display:inline-block;width:40px;height:20px;bac 30Seconds CSS
CSS 交互 - 相邻兄弟视觉弱化 2019-08-20 描述鼠标移上时，对相邻的兄弟元素进行视觉上的弱化。HTML<divclass="sibling-fade"><span>Item1</span><span>Item2</span><span>Item3</span><span>Item4</span><span>Item5</span><span>Item6</span></div>CSSspan{padding:01rem;t 30Seconds CSS
CSS 交互 - 当鼠标移上或聚焦时弹出菜单 2019-08-19 描述当鼠标移上或聚焦时把隐藏的菜单弹出进行展示。HTML<divclass="reference"tabindex="0"><divclass="popout-menu">Popoutmenu</div></div>CSS.reference{position:relative;background:tomato;width:100px;height:100px;}.popout 30Seconds CSS
CSS 交互 - 跟踪光标的渐变效果 2019-08-16 描述一个渐变跟随着光标移动的效果。HTML<buttonclass="mouse-cursor-gradient-tracking"><span>Hoverme</span></button>CSS.mouse-cursor-gradient-tracking{position:relative;background:#7983ff;padding:0.5rem1rem;font 30Seconds CSS
CSS 交互 - 子元素选中后改变父元素的样式 2019-08-15 描述当表单中的任何元素被选中时，修改该表单的样式。HTML<divclass="focus-within"><form><labelfor="given_name">GivenName:</label><inputid="given_name"type="text"/><br/><labelfor="family_name">FamilyName:</label><inputid 30Seconds CSS
CSS 交互 - 选不中我 2019-08-14 描述让内容无法被选中。HTML<p>Youcanselectme.</p><pclass="unselectable">Youcan'tselectme!</p>CSS.unselectable{user-select:none;}DemoSeethePen<ahref='https://codepen.io/vanessa219/pen/KKPVJVZ/'>Disablesel 30Seconds CSS