Fatal编程技术网
  • javascript/
  • Javascript 根据一天中的时间向React应用程序添加问候语

Javascript 根据一天中的时间向React应用程序添加问候语

javascript reactjs

Javascript 根据一天中的时间向React应用程序添加问候语,javascript,reactjs,Javascript,Reactjs,我刚开始使用React，我正在尝试实现一种问候语，其中用户根据一天中的时间获得不同的问候语。我熟悉JavaScript函数来实现这一点，只是不知道如何直接将其插入到代码中。这是我的导航栏组件，到目前为止我已经在React中使用过了 import React，{Component}来自“React” 从“语义ui反应”导入{下拉菜单、菜单、项目、图像、网格} 常量用户名={ 用户名：“Alyssa” } 类导航栏扩展组件{ 状态={ activeItem:'站点'， } handleItemCl

我刚开始使用React，我正在尝试实现一种问候语，其中用户根据一天中的时间获得不同的问候语。我熟悉JavaScript函数来实现这一点，只是不知道如何直接将其插入到代码中。这是我的导航栏组件，到目前为止我已经在React中使用过了

import React，{Component}来自“React”
从“语义ui反应”导入{下拉菜单、菜单、项目、图像、网格}
常量用户名={
用户名：“Alyssa”
}
类导航栏扩展组件{
状态={
activeItem:'站点'，
}
handleItemClick=（e，{name}）=>this.setState({
activeItem:名称
})
render（）{
const{activeItem}=this.state；
返回(
您好，{userName.userName}
网站群
地点
主题
序列
登录页
)
}
}

导出默认导航栏
这有点冗长，但它应该涵盖您需要了解的所有内容。创建一个
问候语
组件。安装此组件时，获取小时数并根据小时数向用户显示不同的消息



类问候语扩展了React.Component{
状态={
小时：空，
用户名：“Alyssa”
}
componentDidMount（）{
这个。getHour（）
}
getHour=（）=>{
const date=新日期（）；
const hour=date.getHours（）
这是我的国家({
小时
});
}
render（）{
const{hour，username}=this.state；
返回(
{hour<12？`早上好${username}`:`晚上好${username}`}
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）



你随身带着问候语吗？我想这可能会帮助你
state={activeItem:'sites'，greeting:functionthatthereturnthegreeting}