java - 如何在 react 中渲染和显示日期字符串而不出现错误

Question

对象作为 React 子对象无效(发现时间:2018 年 9 月 21 日周五 09:39:42 GMT-0400(东部夏令时间))。如果您打算渲染子集合，请改用数组。

import React, { Component } from 'react';
import './App.css';

class App extends Component {

constructor(props) {
  super(props)
  const pokemons = ["Pike", "Bulba", "Charmander"];
  this.state = {
    pokemon: pokemons
  }

}


render() {

function displayDate() {
  return new Date();

}

return (
  <div>
    <div class="container-fluid" style={{ background: "red" }}>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/International_Pok%C3%A9mon_logo.svg/1200px-International_Pok%C3%A9mon_logo.svg.png" alt="logo" style={{ height: 100, padding: 10 }} />
      <input className="input"
        style={{ borderWidth: 4, borderStyle: "solid", width: "99%", padding: 10 }}
        placeholder="Type a pokemon"
      >
      </input>
      <div style={{ display: "flex", justifyContent: "center", padding: 20 }}>
        <button className="btn btn-secondary">Search</button>
      </div>




    </div>

    <div class="row">
      <div class="col-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
          <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
          <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
          <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
        </div>
      </div>
      <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
          <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
          <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
        </div>
        <div>
          <div class="jumbotron jumbotron-fluid">
            <div class="container">
              <h1 style={{ textDecoration: "underline" }} class="display-4">Welcome Pokefans!</h1>
              <p class="lead">This is your stop for everything pokemon! Be sure to check back often!</p>
            </div>
            <div>
            </div>
          </div>
          <div class="alert alert-info" role="alert">
            <p>{displayDate()}</p>
          </div>
        </div>
        <div>
          <div class="card">
            <div class="card-body">
              <img style={{ width: 40 }} src="http://1.bp.blogspot.com/-UUopH2Kl-8U/V5ISnU673iI/AAAAAAAABRU/C2QZ4cDfTJcFCmSdzsOW7_w2eS03j9K-ACK4B/s1600/pokemon-go-ban.jpg" alt="pokemon ball" />
              Read Pokenews
          </div>
          </div>
          <div class="card">
            <div class="card-body">
              <img style={{ width: 40 }} src="https://vignette.wikia.nocookie.net/pokemon/images/4/44/Pok%C3%A9_Ball.jpg/revision/latest?cb=20090507215041" alt="pokemon ball" />
              Purchase Pokeballs
          </div>
          </div>
          <div class="card">
            <div class="card-body">
              <img style={{ width: 40 }} src="https://thenerdstash.com/wp-content/uploads/2018/05/pokemon-lets-go.jpg" alt="pokemon ball" />
              Purchase Pokemon
          </div>
          </div>
          <div class="card">
            <div class="card-body">
              <img style={{ width: 40 }} src="https://cdn.bulbagarden.net/upload/thumb/2/2e/GO_Potion.png/200px-GO_Potion.png" alt="pokemon ball" />
              Purchase Accessories
          </div>
          </div>
        </div>
      </div>
    </div>

  </div >
  );
  }
}

export default App;

需要一些帮助。显示错误。

Answer 1

new Date() 返回一个您需要字符串的对象。

要从 Date 对象获取字符串，请使用 new Date().toString() 或 new Date().toDateString()

此外，如果您希望将日期格式化为用户区域设置，您可以使用new Date().toLocaleDateString()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toString