Как заменить слово в предложении на основе условия в ReactJS

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

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

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;

reactjs

08.04.2019 14:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

283

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы можете обновить свой код, чтобы вызвать метод из компонента 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>
    );
  }
}

08.04.2019 14:52

Ответ принят как подходящий

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

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;

Всем большое спасибо, очень приятно :)

— 08.04.2019 15:45

08.04.2019 14:52

  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 && 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;

08.04.2019 14:55

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

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>)

08.04.2019 14:57

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/

08.04.2019 15:12