Question

我的网站标题中有一个React组件，上面写着（早上好，我是John，感谢您访问我的网站，如果需要更多信息，请与我联系）。

第一行说早安，我想根据用户当前时间更改它，说下午和晚安。我下面已经有代码了，但是不确定在这里如何实现它，只是在保留我的其余段落的同时更改了唯一的单词

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;

Answer 1

You could update your code to invoke a method from the React component like so:

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

Answer 2

You can define the code above into a reusable function, and then just create a new greeting on each rerender. Then just display in the render with curly brackets.

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;

Answer 3

  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;

Answer 4

Try with this:

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

And in your render function:

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

Answer 5

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/

如何基于ReactJS中的条件替换句子中的单词

5 个答案: