javascript - 根据一天中的时间向 React App 添加问候语

Question

我刚开始使用 React，我正在尝试实现一种问候语，用户可以根据一天中的不同时间收到不同的问候语。我熟悉执行此操作的 JavaScript 函数，只是不确定如何将它直接插入到我的代码中。这是我目前在 React 中拥有的导航栏组件。

import React, { Component } from 'react'
import { Dropdown, Menu, Item, Image, Grid} from 'semantic-ui-react'

const userName = {
  username: 'Alyssa'
}

class NavBar extends Component {
  state = {
    activeItem: 'sites',
  }

  handleItemClick = (e, { name }) => this.setState({
    activeItem: name
  })


  render() {
    const {activeItem} = this.state;
    return (
      <div>
        <Menu inverted vertical>
        <Item>
          <Image size="tiny" centered src="https://s3.amazonaws.com/whatif-assets-cdn/images/what_ifcolonizer.png"></Image>
        </Item>
        <Grid columns={2} divided>
          <Grid.Row>
              <Grid.Column>
                <Item>
                  <Image size="tiny" circular src="https://randomuser.me/api/portraits/men/20.jpg"/>
                </Item>
              </Grid.Column>
              <Grid.Column>
                <Item>
                  <Item.Description>
                    Hello, {userName.username}
                  </Item.Description>  
                </Item>
              </Grid.Column>

            </Grid.Row>
        </Grid>
        <Dropdown item text='Sites'>
        <Dropdown.Menu name='sites' active={activeItem === 'sites'} onClick={this.handleItemClick} >
          <Dropdown.Item>Site Groups</Dropdown.Item>
          <Dropdown.Item>Sites</Dropdown.Item>
          <Dropdown.Item>Themes</Dropdown.Item>
          <Dropdown.Item>Sequences</Dropdown.Item>
          <Dropdown.Item>Landing Pages</Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
          
        <Menu.Item
          name='Campaigns'
          active={activeItem === 'Campaigns'}
          onClick={this.handleItemClick}
        />
        <Menu.Item
          name='Users'
          active={activeItem === 'Users'}
          onClick={this.handleItemClick}
        />
      <Menu.Item
          name='Settings'
          active={activeItem === 'Settings'}
          onClick={this.handleItemClick}
        />
      </Menu>
      </div>
    )
  }
}


export default NavBar

我只想将问候语和用户名放在标签中。

Answer 1

这有点冗长，但它应该涵盖您需要了解的所有内容。创建一个 Greeting 组件。当此组件安装时获取小时，并根据小时向用户显示不同的消息。

class Greeting extends React.Component {
  state = {
    hour: null,
    username: 'Alyssa'
  }
  
  componentDidMount() {
    this.getHour()
  }

  getHour = () => {
   const date = new Date();
   const hour = date.getHours()
   this.setState({
      hour
   });
  }

  render(){
    const {hour, username} = this.state;
    return (
      <div className='App'>
        <h2>{hour < 12 ? "Good Morning" : "Good evening"} {username}</h2>
      </div>
    );
  }

}

const rootElement = document.getElementById("root");
ReactDOM.render(<Greeting />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>