Блог

У меня есть компонент react для заголовка моего веб-сайта, который гласит (Доброе утро, я Джон, спасибо, что посетили мой веб-сайт, пожалуйста, свяжитесь со мной, если вам нужна дополнительная информация).

в первой строке написано «Доброе утро», я пытаюсь изменить его в зависимости от текущего времени пользователя, чтобы сказать «добрый день» и «добрый вечер». У меня уже есть код ниже, но я не уверен, как его реализовать здесь, просто изменив это единственное слово, сохранив остальную часть моего абзаца

 let today = new Date()
let curHr = today.getHours()
if (curHr < 12) {
<h1> Good morning <h1>
} else if (curHr < 18) {
<h1> Good afteroon <h1>
} else {
<h1> Good evening <h1>
}



import React, { Component } from "react";
class MainHeader extends Component {
  render() {
    return (
      <div className="my_header">
      <h3> Good morning, I'm john Thank you for visiting my website, please contact me if you need more information </h3>

      </div>
    );
  }
}
export default MainHeader;
  

Вы могли бы обновить свой код для вызова метода из компонента React следующим образом:

 class MainHeader extends Component {
  getTimeOfDay() {
    // your conditional checks here
    if (Math.floor(Math.random() * 1000) > 500) {
      return "morning";
    }

    return "afternoon";
  }

  render() {
    return (
      <div className="my_header">
      <h3> Good {this.getTimeOfDay()}, I'm john Thank you for visiting my website, please contact me if you need more information </h3>

      </div>
    );
  }
}
  

Вы можете определить приведенный выше код в повторно используемую функцию, а затем просто создать новое приветствие для каждого повторного запроса. Затем просто отобразите в рендере с фигурными скобками.

 function generateGreeting(){
  let today = new Date()
  let curHr = today.getHours()
  if (curHr < 12) {
     return 'Good morning'
  } else if (curHr < 18) {
     return 'Good afteroon'
  } else {
     return 'Good evening'
  }
}

import React, { Component } from "react";
class MainHeader extends Component {
  render() {
    const greeting = generateGreeting();
    return (
      <div className="my_header">
      <h3> <h1>{greeting}</h1>, I'm john Thank you for visiting my website, please contact me if you need more information </h3>

      </div>
    );
  }
}
export default MainHeader;
  

   import React, { Component } from "react";

  let today = new Date()
  let curHr = today.getHours()


  class MainHeader extends Component {
      render() {
        let headline = "Good evening";

        if(curHr < 12) {
          headline = "Good morning";
        }

        if(curHr > 12 amp;amp; curHr < 18) {
          headline = "Good afternoon";
        }

        return (
          <div className="my_header">
            <h1>{headline}</h1>
            <h3>I'm john Thank you for visiting my website, please contact me if you need more information </h3>
          </div>
        );
      }
    }
    export default MainHeader;
  

Попробуйте с этим:

 function getGreetings() {
    let today = new Date()
    let curHr = today.getHours()
    if (curHr < 12) {
        return  <h1> Good morning <h1> 
    } else if (curHr < 18) {
       return <h1> Good afteroon <h1>
    } else { 
       return <h1> Good evening <h1> 
    }

  

И в вашей функции визуализации:

 render() { 
    return ( 
        <div className="my_header">
             <h3> {getGreetings ()}, I'm john Thank you for visiting my website, please contact me if you need more information </h3> 
        </div>)
  

 const today = new Date();
const curHr = today.getHours();
let message;
if (curHr < 12) {
    message = <h1> Good morning </h1>;
} else if (curHr < 18) {
    message = <h1> Good afteroon </h1>;
} else {
    message = <h1> Good evening </h1>;
}

class MainHeader extends React.Component {  
  render() {
    return (
      <div className="my_header">
        {message}
        <h3>I'm john Thank you for visiting my website, please contact me if you need more information </h3>
      </div>
    )
  }
}
  

JSFiddle: https://jsfiddle.net/agustin107/h0qbL7k5/2 /