首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React Hooks -根据条件突出显示一周中的某一天

React Hooks是React的一种特性,它允许我们在无需编写类组件的情况下,使用状态和其他React特性。Hooks提供了一种更简洁、可重用和可测试的方式来编写React组件。

对于根据条件突出显示一周中的某一天的需求,我们可以使用React Hooks来实现。下面是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';

const WeekDayHighlight = () => {
  const [selectedDay, setSelectedDay] = useState('');

  const handleDayClick = (day) => {
    setSelectedDay(day);
  };

  return (
    <div>
      <button onClick={() => handleDayClick('Monday')} style={{ fontWeight: selectedDay === 'Monday' ? 'bold' : 'normal' }}>Monday</button>
      <button onClick={() => handleDayClick('Tuesday')} style={{ fontWeight: selectedDay === 'Tuesday' ? 'bold' : 'normal' }}>Tuesday</button>
      <button onClick={() => handleDayClick('Wednesday')} style={{ fontWeight: selectedDay === 'Wednesday' ? 'bold' : 'normal' }}>Wednesday</button>
      <button onClick={() => handleDayClick('Thursday')} style={{ fontWeight: selectedDay === 'Thursday' ? 'bold' : 'normal' }}>Thursday</button>
      <button onClick={() => handleDayClick('Friday')} style={{ fontWeight: selectedDay === 'Friday' ? 'bold' : 'normal' }}>Friday</button>
      <button onClick={() => handleDayClick('Saturday')} style={{ fontWeight: selectedDay === 'Saturday' ? 'bold' : 'normal' }}>Saturday</button>
      <button onClick={() => handleDayClick('Sunday')} style={{ fontWeight: selectedDay === 'Sunday' ? 'bold' : 'normal' }}>Sunday</button>
    </div>
  );
};

export default WeekDayHighlight;

在上述代码中,我们使用了useState Hook来创建了一个名为selectedDay的状态变量,并使用setSelectedDay函数来更新该变量。每个按钮都有一个onClick事件处理函数,当点击按钮时,会调用handleDayClick函数,并将相应的日期作为参数传递给它。在handleDayClick函数中,我们通过调用setSelectedDay来更新selectedDay的值。

每个按钮的样式根据selectedDay的值来动态设置,如果selectedDay与按钮对应的日期相等,则设置字体加粗,否则设置为正常字体。

这样,当用户点击按钮时,被选中的日期将以加粗字体显示,其他日期将以正常字体显示。

推荐的腾讯云相关产品:无

希望以上信息能够帮助到您!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Chrome Dev Summit 2019,你需要知道关于前端性能内容都在这里

在两时间里,Chrome内部开发人员分享了Chrome生态系统,工具和方法更新,用于帮助我们构建更好,更具吸引力体验网站。...最近,Chrome浏览器采取进一步措施,以突出显示给定网站可能会提供较差用户体验。这些通知将采用Chrome内置界面元素和警告形式。 ?...2 低端设备React适配 Adaptive Loading HooksReact生态针对低端手机设备工具库。通过它我们可以采用特定资源加载、数据获取、代码分割和能力降级。...最终,通过它可以根据不同设备类型、网络速度和数据存储模式来自定义不同用户体验效果。 ? 目前它提供了四种获取设备性能hooks能力:网络状态、存储状态、CPU内核数和内存状态。...{ useMemoryStatus } from 'react-adaptive-hooks/memory'; 下面就是一个根据网络状态动态加载不同资源内容例子: import React from

75450

美丽公主和它27个React 自定义 Hook

(当然,也还没到了「固执己见」地步,有些合适库还是会用) 所以,今天这篇文章,就给大家罗列一些在开发,可能会用到并且能帮助到大家自定义Hook 好了,不早了,干点正事哇。...它返回一个带有以下函数对象: push(element): 将指定元素添加到数组。 filter(callback): 根据提供回调函数对数组进行筛选,删除不满足条件元素。...例如,我们可以使用它动态调整导航菜单布局,根据屏幕大小隐藏或显示某些元素,甚至可以根据可用空间优化数据加载。...无论我们需要在悬停时突出显示元素、触发其他操作或动态更改样式,这个自定义钩子都能胜任。...例如,我们可以通过在用户失去互联网连接时显示提示来提高用户体验,以便他们采取适当行动。此外,我们可以根据用户在线状态有条件地渲染某些组件或触发特定行为。

57820

用动画和实战打开 React Hooks(一):useState 和 useEffect

自从 React 16.8 发布之后,它带来 React Hooks 在前端圈引起了一场无法逆转风暴。React Hooks 为函数式组件提供了无限功能,解决了类组件很多固有缺陷。...起步 前提条件 在阅读这篇教程之前,希望你已经做了如下准备: 掌握了 React 基础知识,例如组件、JSX、状态等等,如果你不了解的话,请先学习《一杯茶时间,上手 React 框架》[3] 配置好...如何快速学习并掌握 React Hooks 一直是困扰很多新手或者老玩家一个问题,而笔者在日常学习和开发也发现了以下头疼之处: React 官方文档对 Hooks 讲解偏应用,对原理阐述一笔带过...讲 React Hooks 优秀文章很多,但大多专注于讲解一两个 Hook,要想一网打尽有难度 看了很多使用方法甚至源码分析,但是没法和具体使用场景对应起来,不了解怎么在实际开发灵活运用 如果你也有同样困惑...因此一个隐患便是,当 deps 某一元素为非原始类型时(例如函数、对象等),每次渲染都会发生改变,从而失去了 deps 本身意义(条件式地触发 Effect)。

2.5K20

关于前端面试你需要知道知识点

props.children和React.Children区别 在React,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来。...Js方式undefined根据用户权限类型,把菜单配置成json, 没有权限直接不显示 react-router 方式 在route 标签上 添加onEnter事件,进入路由之前替换到首页 <Route...StrictMode 是一个用来突出显示应用程序潜在问题工具。与 Fragment 一样,StrictMode 不会渲染任何可见 UI。它为其后代元素触发额外检查和警告。...React Hooks 限制主要有两条: 不要在循环、条件或嵌套函数调用 Hook; 在 React 函数组件调用 Hook。 那为什么会有这样限制呢?...那为什么不要在循环、条件或嵌套函数调用 Hook 呢?因为 Hooks 设计是基于数组实现。在调用时按顺序加入数组,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。

5.4K30

react常见面试题

插件为何React事件要自己绑定this在 React源码,当具体到某一事件处理函数将要调用时,将调用 invokeGuardedCallback方法。...React-HooksReact 团队在 React 组件开发实践,逐渐认知到一个改进点,这背后其实涉及对类组件和函数组件两种组件形式思考和侧重。...如果说函数组件是一台轻巧快艇,那么 React-Hooks 就是一个内容丰富零部件箱。...React严格模式如何使用,有什么用处?StrictMode 是一个用来突出显示应用程序潜在问题工具。与 Fragment 一样,StrictMode 不会渲染任何可见 UI。...在 HTML ,表单元素如 、和通常维护自己状态,并根据用户输入进行更新。当用户提交表单时,来自上述元素值将随表单一起发送。

1.5K10

React 16 Roadmap

Data Fetching 场景类似,在提升开发体验(统一数据请求及缓存方式)同时,兼顾用户体验(显示 Loading)。...P.S.Concurrent Mode 之前叫做 async mode,改名是为了突出与其它异步渲染技术不同,有优先级调度概念,类似于分时操作系统并发执行多道程序能力 对于计算密集(CPU-bound...)型任务而言,Concurrent Mode 带来非阻塞式渲染能力,能在渲染大组件树同时,保证应用交互响应能力(不至于卡死),是React 愿景很大一块 具体,Concurrent Mode...例如让 UI 等待数据回来,在此期间通过React.Suspense显示 Loading: // React Cache for simple data fetching (not final API)...Suspense 同样能够配合 SSR,前后端合璧提升页面加载体验 具体,渐进加载,并分块渲染页面内容,同时结合 Suspense 特性提升加载视觉体验: We started designing

1.2K30

Excel实战技巧:使用日期时间值

Excel将时间存储为小数,因为时间被认为是一一部分。 因此,日期和时间实际上是Excel数字,只需在Excel工作表输入日期并将其格式化为数字即可查看其等效数值。...如果你想从星期一开始一周,则使用=WEEKDAY("2021-7-28",2)。 6.使用条件格式突出显示周末 如果想要在一系列日期值突出显示周末,则可以使用条件格式,如下图2所示。...图3 例如,可以指定类似上面的条件以确保输入日期处于2021年8月8日至2021年8月20日。此外,使用数据验证设置消息选项,甚至可以显示如下图4所示消息。...10.常用日期/时间函数 Excel有许多日期和时间函数,下面是常用一些: WEEKDAY函数:返回代表一周第几天数值。 DAY函数:返回一个月中第几天数值。 MONTH函数:返回月份值。...TEXT函数:根据指定格式将日期转换成相应日期格式显示。 =EDATE(date,1):返回下月同一日期。 =EOMONTH(date,0):返回该月最后一日期。

3.6K30

React 16.8.6 升级指南(react-hooks篇)

其实之前说了那么多,归结于一句话就是Hooks可以在现有基础上帮助你提升React开发体验 熟悉类组件开发同学刚接触hook时候其实是比较疑惑,个人觉得有以下几点: Hooks状态如何持久化...,这就对应上了官方对于使用hooks建议:不要在循环,条件或嵌套函数调用 Hook,很明显,如果在条件语句中使用了hook会导致hook对象无法对应上它原本值。...hook会在Reactcommit阶段触发commitHookEffectList函数,具体实现就是会根据传入unmountTag和mountTag来判断是否要执行对应create和destroy...它和class组件生命周期最大不同就在于其内部inputs字段,可以控制effect是否触发,除了触发时机这个条件,还有inputs值是否发生了变化这个更重要条件,也就是说我们可以通过控制effect...Hooks精准依赖 在官方提供Hooks,有一部分hooks可以传入一个依赖数组,它会根据上下两次传入值做浅比较,来决定是不是要销毁重新调用。

2.6K30

2022前端必会面试题(附答案)

尤其是高并发访问情况,会大量占用服务端CPU资源;2)开发条件受限在服务端渲染,只会执行到componentDidMount之前生命周期钩子,因此项目引用第三方库也不可用其它生命周期钩子,这对引用库选择产生了很大限制...StrictMode 是一个用来突出显示应用程序潜在问题工具。与 Fragment 一样,StrictMode 不会渲染任何可见 UI。它为其后代元素触发额外检查和警告。...Hook 理解,它实现原理是什么React-HooksReact 团队在 React 组件开发实践,逐渐认知到一个改进点,这背后其实涉及对类组件和函数组件两种组件形式思考和侧重。...如果说函数组件是一台轻巧快艇,那么 React-Hooks 就是一个内容丰富零部件箱。...图片真实 DOM 首先会映射为虚拟 DOM;当虚拟 DOM 发生变化后,就会根据差距计算生成 patch,这个 patch 是一个结构化数据,内容包含了增加、更新、移除等;根据 patch 去更新真实

2.2K40

React】1804- React 实现自动上报 pvclick 埋点 Hooks

前言 此篇文章笔者将围绕 React 自定义 hooks 给大家讲讲自定义 hooks 概念以及我们要如何来设计编写自定义 hooks......介绍 自定义 hooks 是基于 React Hooks 一个拓展,我们可以根据业务需求制定满足业务需要组合 hooks,更注重是逻辑单元。...自定义 hooks 驱动本质上就是函数组件执行。 驱动条件 自定义 hooks 驱动条件主要有两点: props 改变带来函数组件执行。...顺序原则 自定义 hooks 内部至少要有一个 React Hooks,那么自定义 hooks 也同样要遵循 React Hooks 规则,不能放在条件语句中,而且要保持执行顺序一致性。...这是因为在更新过程,如果通过 if 条件语句,增加或者删除 hooks,那么在复用 hooks 过程,会产生复用 hooks 状态和当前 hooks 不一致问题。

31230

React】2054- 为什么React Hooks优于hoc ?

在现代 React世界,每个人都在使用带有 React Hooks函数组件。然而,高阶组件(HOC)概念在现代 React世界仍然适用,因为它们可以用于类组件和函数组件。...HOC 与 Hooks:属性混乱 让我们来看下面这个用于条件渲染高阶组件(HOC)。如果出现错误,它会渲染一个错误消息。...在现代 React世界,每个人都在使用带有 React Hooks 函数组件。然而,高阶组件(HOC)概念在现代 React世界仍然适用,因为它们可以用于类组件和函数组件。...最终,这就是我们最初得出这个结论原因,通过重命名从React Hooks 输出变量,我们避免了名称冲突。当使用 HOCs时,我们需要注意 HOCs可能在内部使用相同名称props。...HOCs可以从组件遮蔽复杂性(例如,条件渲染、受保护路由)。但正如最后情景所示,它们并不总是最佳解决方案。因此,我建议是改用 React Hooks

10700

react面试题笔记整理(附答案)

和解最终目标是根据状态,以最有效方式更新用户界面。如果我们知道用户界面的某一部分不会改变,那么没有理由让 React弄清楚它是否应该更新渲染。...(1)React16.8 加入hooks,让React函数式组件更加灵活,hooks之前,React存在很多问题:在组件间复用状态逻辑很难复杂组件变得难以理解,高阶组件和函数组件嵌套过深。...新 UNSAFE_前缀将有助于在代码 review 和 debug 期间,使这些有问题字样更突出废弃 javascrip:形式 URL。...如果满足某个条件,thunk 则可以用来延迟 action 派发(dispatch),这可以处理异步 action 派发(dispatch)。...props不可以变性就保证相同输入,页面显示内容是一样,并且不会产生副作用哪些方法会触发 React 重新渲染?重新渲染 render 会做些什么?

1.2K20

【愚公系列】2023年03月 其他-Web前端基础面试题(react专项_35道)

hooks 产生背景及 hooks优点 13、 React hooks 怎么模拟生命周期 14、React `useState()` 是什么?...hooks优点 hooks是针对在使用react时存在以下问题而产生: 组件之间复用状态逻辑很难,在hooks之前,实现组件复用,一般采用高阶组件和 Render Props,它们本质是将复用逻辑提升到父组件...23、React严格模式如何使用,有什么用处? StrictMode 是一个用来突出显示应用程序潜在问题工具。与 Fragment 一样,StrictMode 不会渲染任何可见 UI。...shouldComponentUpdate()——根据某些条件返回真值或假值。 如果希望组件更新,则返回true,否则返回false。 默认情况下,它返回false。...它们将不同浏览器行为合并到一个API。 这样做是为了确保事件在不同浏览器之间显示一致属性。

7.6K10

使用antd表格组件实现日程表

: react-antd-schedule/lib 我们需要把react相关代码写在text/babel标签,如下所示,我们打印antd和react看看是否有值。...日程内容单元格内容如果为空时,需要将单元格进行合并,显示一个增加图标,点击增加图标后,打开系统弹窗进行增加操作,操作完成后,渲染内容至刚才点击单元格。...如果内容单元格有内容时,根据不同状态,打开不同弹窗进行改、删操作,操作完后,更新结果至对应单元格。...image-20201119172808318 然而,事情没有预想那么顺利,我页面做好后,到开发周期最后一下午,后端把接口给我了,但返回数据不是我预想格式,我又进行了二次处理,页面渲染出来后,...此时,问题就产生了,如果写在hooks外面,那么就无法拿到antd表格内部数据做到页面重新渲染,经过一番思考后,想到了可以Proxy来实现,当被代理对象发生改变时,就触发hooks代理函数,实现代码如下

3.6K20

8分钟为你详解React、Angular、Vue三大框架

React创建了一个内存数据结构缓存,计算得出变化差异,只渲染实际变化子组件, 从而高效地更新浏览器显示DOM。...上面代码显示结果是: ? 条件语句 If-else语句不能在JSX中使用,但可以使用条件表达式来代替。下面的例子当i为1时将 { i === 1 ?...函数和JSX可以用于条件表达式: ? 结果会是: ?...Hooks是让开发者从函数组件 "钩入"React状态和生命周期特性函数。它们使代码具有更强可读性且更易理解。Hooks并不在类组件内工作,它终极目标是在React消除类组件存在。...Vue提供了一个界面,可以根据当前URL路径来改变页面上显示内容 – 可以有多种方式(无论是通过电子邮件链接、刷新还是页面内链接)。

22.1K20
领券