Das Datum in JSX in ReactJS kann nicht angezeigt werden

Question

Folgendes ist mein Code, der gut funktioniert, wenn ich Test mit einer Zeichenfolge initialisiere, wenn ich es jedoch zu new Date() seinen Wurffehler änderte. Lass mich wissen, was ich falsch mache, als ich gerade mit React angefangen habe.

-Code -

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import registerServiceWorker from './registerServiceWorker'; 

    class App extends React.Component { 
     render() { 
      //let test = 'this is a string'; // WORKING FINE 
      let test = new Date(); 
      return (
       <div> 
        <h1>Hello World</h1> 
        <p>{test}</p> 
       </div> 
      ); 
     } 
    } 

    ReactDOM.render(<App />, document.getElementById('root')); 
    registerServiceWorker(); 

Fehler -

Objekte als Reaktion Kind nicht gültig sind (gefunden: Fr 21. Juli 2017 02.11.18 GMT + 0530 (Indien Standardzeit)). Wenn Sie eine Sammlung von untergeordneten Elementen rendern möchten, verwenden Sie stattdessen ein Array oder wickeln Sie das Objekt mithilfe von createFragment (Objekt) aus den React-Add-Ons um.

Answer 1

Sie sehen, dass Datum ein Objekt und keine Zeichenfolge ist. Damit es funktioniert, wie Sie es ohne Bibliotheken haben:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import registerServiceWorker from './registerServiceWorker'; 

class App extends React.Component { 
    render() { 
     //let test = 'this is a string'; // WORKING FINE 
     let test = new Date(); 
     return (
      <div> 
       <h1>Hello World</h1> 
       <p>{test.toString()}</p> 
      </div> 
     ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('root')); 
registerServiceWorker(); 

Rufen Sie die toString() -Methode für das Datum Objekt.

Answer 2

Versuchen Sie folgendes:

<p>{test.toString()}</p> 

Sie versuchen, ein Objekt zu machen, die nicht Bestandteil reagieren, daher reagieren die Fehler auslöst.

Answer 3

Das Problem besteht darin, dass Sie ein Objekt übergeben, wenn React eine Zeichenfolge erwartet. Ich würde empfehlen, mit einem Paket wie moment zu arbeiten. Wenn ich date-bezogene Sachen mache, finde ich es fast immer effizienter, mit einem Paket zu arbeiten ... und das sage ich nie.

Wenn Sie wirklich gegen ein Paket sind, dann führen Sie einfach .toString() am Ende test.

let test = new Date(); 
const App = ({}) => (
    <div> 
     <h1>Hello World</h1> 
     <p>{test.toString()}</p> 
    </div> 
) 

.... Präsentationskomponenten den ganzen Weg!

Answer 4

als @Brady Edgar sagte, man kann nicht ein Date-Objekt in JSX verwenden, weil es keine String Interpolation zwischen {} ist aber JSX Ausdrücke. Wenn Sie eine Interpolation verwenden, wie Today is ${ new Date() } wandelt JS das Datum Objekt in String automatisch um.

Was Sie tun JSX Ausdrücke verwendet, und { new Date() } gibt einen Datum Objekt, und das ist kein gültiges Kind React.

Wie bereits erwähnt, müssen Sie Ihr Datum Objekt in String konvertieren.Sie können eine Bibliothek wie moment verwenden oder einfach nur die Methode toLocaleDateString von um Datum Objekt verwenden den Browser locale zu verwenden:

let test = new Date(); 
return (
    <div> 
    <h1>Hello World</h1> 
    <p>{ test.toLocaleDateString() }</p> 
    </div> 
); 

Ich bin sicher, dass Sie bereits das lösen, aber ich wollte betonen, was Sie verwenden, ist keine Interpolation, sondern JSX-Ausdrücke.