首页
学习
活动
专区
工具
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 Hooks 是React生态中针对低端手机设备的工具库。通过它我们可以采用特定的资源加载、数据获取、代码分割和能力降级。...最终,通过它可以根据不同的设备类型、网络速度和数据存储模式来自定义不同的用户体验效果。 ? 目前它提供了四种获取设备性能的hooks能力:网络状态、存储状态、CPU内核数和内存状态。...{ useMemoryStatus } from 'react-adaptive-hooks/memory'; 下面就是一个根据网络状态动态加载不同资源内容的例子: import React from

77150

魔改react-calendar还原UI设计中的打卡日历效果

日历的周字去除 formatShortWeekday 是 react-calendar 库中的一个方法,用于格式化一周中每一天的显示名称。这个方法主要用于显示日历组件中的星期几的缩写形式。...locale: 当前的区域设置(例如 en-US、zh-CN 等),决定了日期格式的语言和地区规则。 date: 当前的日期对象,代表一周中的某一天。...,用于获取一周中某一天的索引。...这个方法返回的值是一个整数,代表一周中的某一天。具体来说,返回值是一个从 0 到 6 的整数,分别对应一周的七天。...自定义日期单元格中的内容(状态指示+日期显示格式) tileContent 是一个非常有用的属性,允许你自定义日历每个日期单元格中的内容。

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

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

    70820

    用动画和实战打开 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.6K20

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

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

    5.4K30

    react常见面试题

    插件为何React事件要自己绑定this在 React源码中,当具体到某一事件处理函数将要调用时,将调用 invokeGuardedCallback方法。...React-Hooks 是 React 团队在 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.3K30

    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.9K30

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

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

    2.7K30

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

    尤其是高并发访问的情况,会大量占用服务端CPU资源;2)开发条件受限在服务端渲染中,只会执行到componentDidMount之前的生命周期钩子,因此项目引用的第三方的库也不可用其它生命周期钩子,这对引用库的选择产生了很大的限制...StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。...Hook 的理解,它的实现原理是什么React-Hooks 是 React 团队在 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 不一致的问题。

    44730

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

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

    1.2K20

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

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

    3.7K20

    【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。

    19700

    【愚公系列】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
    领券