Render DOM-Element in REACT js

Ich habe frische js auf lokalen wie reagieren installiert:Render DOM-Element in REACT js

npm install -g create-react-app 
create-react-app hello-world 
cd hello-world 
npm start

App.js:

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import ReactDOM from 'react-dom'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 

     </div> 
     <div id="root"></div> 
     <div id="test"></div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 

     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <h1>Hello, world Root!</h1>, 
    document.getElementById('root') 
); 

ReactDOM.render(
    <h1>Hello, world Test!</h1>, 
    document.getElementById('test') 
); 

export default App;

index.html:

<body> 
    <div id="root"></div> 
    <div id="test"></div> 
    <!-- 
     This HTML file is a template. 
     If you open it directly in the browser, you will see an empty page. 

     You can add webfonts, meta tags, or analytics to this file. 
     The build step will place the bundled scripts into the <body> tag. 

     To begin the development, run `npm start`. 
     To create a production bundle, use `npm run build`. 
    --> 
    </body>

Das Problem ist, dass ich nur Hello, Welt-Test drucken kann! und nicht Hallo, Weltwurzel! obwohl ich keinen Fehler bekomme, bedeutet es, dass es ein DOM-Element ist, als würde ich nichts bekommen. Ich habe es auch inspiziert und sie auch es wird nicht übertragen.
Auch noch eine Sache, die ich div mit ID 'test' in index.html hinzugefügt habe, so ist es ein guter Ansatz, div darin hinzuzufügen.
Ich bin neu zu reagieren jede Hilfe bitte.

Quelle

2017-02-03 Narendra Vyas

Ich habe keine Ahnung, warum u got 2 ~ 3-Funktion in einer einzigen Klasse machen. – PSo

Ich denke, du solltest stattdessen zuerst ein React-Tutorial nachschlagen. –

ohk danke, obwohl ich ging: https://facebook.github.io/react/docs/hello-world.html, eigentlich, wenn ich nur eine ReactDOM.render Funktion mit ID-Root hinzufügen, die auch nicht drucken. Ich habe es mit beiden gepostet, um zu klären, welches Problem ich bekomme. In meiner App passiert jedes Mal, wenn ich auf Root rendere, nichts. Inzwischen gehe ich durch Tuts, aber unfähig herauszufinden, was dieses Problem ist –

Antwort auf Ihre Frage:

Die machen bereits für ReactDOM.render stehen, ist die gleiche Sache, so im Tutorial, ist es wie

ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('root') 
);

, die gleich ist als

render() { 
    return (
    <h1>Hello, world!</h1> 
) 
}

kleines Tutorial Reagieren: Ist ein einfaches HTML ohne Staat und Requisiten, i denke du machst einfach so.

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import ReactDOM from 'react-dom'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 

     <div id="root"> 
      <h1>Hello, world Root!</h1> 
     </div> 

     <div id="test"> 
      <h1>Hello, world Test!</h1> 
     </div> 

     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

export default App;

Um Zustand/Requisiten verwenden, können Sie so etwas wie tun:

Zustand:

constructor() { 
    super(); 
    this.state = { 
    text: "Hello, world Root!" 
    }; 
}

ersetzen Sie den Text mit:

<div id="test"> 
    <h1>{this.state.text}</h1> 
</div>

Und in ähnlicher Weise, wenn Sie haben Requisiten = "Hallo, Weltwurzel!", können Sie:

Requisiten:

<div id="root"> 
    <h1>{this.props.root}</h1> 
</div>

Quelle

2017-02-03 07:21:49 PSo

Danke @ PS0 ich lese seine Dokumentation auch. –

@NarendraVyas Fühlen Sie sich frei zu kommentieren, oder stellen Sie detailliertere Frage, diese Frage ist in der Tat unter Standard, sollten Sie mehr zuerst versucht haben, empfehle ich ES6 + anstelle der alten ES5 zu verwenden, denn Sie müssen möglicherweise wieder lernen, wenn Sie ES5 lernen jetzt. – PSo

Render DOM-Element in REACT js

Antwort

Verwandte Themen