Reagieren js: mehrere untergeordnete Kommentare

Ich möchte Ihnen eine Frage zu React.js stellen. Jetzt mache ich ein paar React.js Übungen und es scheint, dass ich einige Fehler gemacht habe. Es sollte speichern, entfernen und bearbeiten Schaltflächen, Textarea. Wenn Sie auf Bearbeiten klicken, erscheint Textfeld. Wenn Sie auf die Schaltfläche "Speichern" klicken, kehren alle Dinge zu den Standardbedingungen zurück.Reagieren js: mehrere untergeordnete Kommentare

Aber der Computer zeigt mir einen leeren Bildschirm.

Hier ist mein Code:

<html> 
<head> 

    <script src = "react-master/../js/react.js"></script> 
    <script src = "react-master/../js/react-dom.js"></script> 
    <script src = "js/browser.js"></script> 

</head> 
<body> 

    <div id = "example"></div> 

    <script type = "text/babel"> 
     var Comment = React.createClass({ 
      getInitialState: function(){ 
       return {editing: false} 
      }, 
      edit: function(){ 
       this.setState({editing: true}); 
      }, 
      remove: function(){ 
       console.log("Removing comments"); 
      }, 
      save: function(){ 
       var val = this.refs.newText.value; 
       console.log (val); 
       this.setState({editing: false}); 
      }, 
      renderNormal: function(){ 
       return(
        <div className = "comment-container"> 
         <div className = "comment-text">{this.props.children}</div> 
         <button onClick = {this.edit}>Edit</button> 
         <button onClick = {this.remove}>Remove</button> 
        </div> 
       ); 
      }, 
      renderForm: function(){ 
       return(
        <div className = "comment-container"> 
         <textarea ref ="newText" defaultValue = {this.props.children}></textarea> 
         <button onClick = {this.save}>Save</button> 
        </div> 
       ); 
      }, 
      render: function(){ 
       if (this.state.editing){ 
        return this.renderForm(); 
       }else{ 
        return this.renderNormal(); 
       } 
      } 
     }); 

     var Board = React.createClass({ 
      getInitialScale: function(){ 
       return (
        comments: ["Ira", "Nata", "Nina"] 
       ) 
      }, 
      render: function(){ 
       return (
        <div className = "board">{ 
         this.state.comments.map(function(text, i){ 
          return (<Comment key = {i}>{text}</Comment>); 
         }) 
        } 
        </div>      
       ); 
      } 
     }); 

     ReactDOM.render(<Board />, document.getElementById("example")); 
    </script> 

</body> 
</html>

Was mache ich falsch? Mit freundlichen Grüßen

Quelle

2017-04-07 Aleks339

Sie versuchen, JSX in Plain js zu verwenden, ohne einen Transformator zu verwenden, daher ein leerer Bildschirm (es wird auch einige Fehler in der Konsole geben).

JSX ist nichts anderes als ein schickes Wort für die Verwendung von HTML-Tags und Struktur in Javascript (zB: siehe Ihre Renderfunktion).

Früher gab es eine Möglichkeit, JSX im Browser selbst zu kompilieren, aber das scheint veraltet zu sein (https://facebook.github.io/react/jsx-compiler.html). Sie können den anderen Link dort für eine Online-Replikation verwenden.

Eine bessere Option wäre, Knoten einzurichten und create-react-app (Details hier: https://github.com/facebookincubator/create-react-app) zu verwenden. Auf diese Weise können Sie eine Vielzahl von Bibliotheken und Dienstprogrammen verwenden.

PS: Überprüfen Sie im Zweifelsfall die Chrome-Entwicklerwerkzeuge (Rechtsklick auf den Bildschirm> Element inspizieren).

Quelle

2017-04-07 06:49:31

Sie hatten einen Tippfehler in Ihrem Code. Wenn Sie das Chrome Developer Tool öffnen, sehen Sie es. Ich habe den Code wie unten korrigiert:

1) getInitialScale ->getInitialState

2) Rückgabewert in getInitialState muss

getInitialState: function(){ 
     return {comments: ["Ira", "Nata", "Nina"]} 
    },

<html> 
 
    <head> 
 
    
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> 
 
    </head> 
 
    <body> 
 
    
 
    <div id = "example"></div> 
 
    
 
    <script type = "text/babel"> 
 
     var Comment = React.createClass({ 
 
      getInitialState: function(){ 
 
       return {editing: false} 
 
      }, 
 
      edit: function(){ 
 
       this.setState({editing: true}); 
 
      }, 
 
      remove: function(){ 
 
       console.log("Removing comments"); 
 
      }, 
 
      save: function(){ 
 
       var val = this.refs.newText.value; 
 
       console.log (val); 
 
       this.setState({editing: false}); 
 
      }, 
 
      renderNormal: function(){ 
 
       return(
 
         <div className = "comment-container"> 
 
          <div className = "comment-text">{this.props.children}</div> 
 
          <button onClick = {this.edit}>Edit</button> 
 
          <button onClick = {this.remove}>Remove</button> 
 
         </div> 
 
       ); 
 
      }, 
 
      renderForm: function(){ 
 
       return(
 
         <div className = "comment-container"> 
 
          <textarea ref ="newText" defaultValue = {this.props.children}></textarea> 
 
          <button onClick = {this.save}>Save</button> 
 
         </div> 
 
       ); 
 
      }, 
 
      render: function(){ 
 
       if (this.state.editing){ 
 
        return this.renderForm(); 
 
       }else{ 
 
        return this.renderNormal(); 
 
       } 
 
      } 
 
     }); 
 
    
 
     var Board = React.createClass({ 
 
      getInitialState: function(){ 
 
       return{ 
 
        comments: ["Ira", "Nata", "Nina"] 
 
       } 
 
      }, 
 
      render: function(){ 
 
       return (
 
         <div className = "board">{ 
 
          this.state.comments.map(function(text, i){ 
 
           return (<Comment key = {i}>{text}</Comment>); 
 
          }) 
 
         } 
 
         </div> 
 
       ); 
 
      } 
 
     }); 
 
    
 
     ReactDOM.render(<Board />, document.getElementById("example")); 
 
    </script> 
 
    
 
    </body> 
 
    </html>

Außer Ihnen Objekt sein, sollte für Chrome React Developer Tools installieren, es ist sehr hilfreich zu debuggen und überprüfen Sie den Zustand (Requisiten) Wert.

Quelle

2017-04-07 07:36:45

Es ist immer eine gute Übung, Ihren Code vom DOM zu trennen. Sie können also eine Datei "abc.js" erstellen und diese kopieren. Ich habe Ihren Code in das React-Format konvertiert und es funktioniert jetzt.

import React from 'react' 
import ReactDOM from 'react-dom' 

class Comment extends React.Component{ 
    constructor(props){ 
     super(props) 
     this.state = { 
     editing : false, 
     textValue: this.props.textValue 
     } 
     this.edit = this.edit.bind(this) 
     this.remove = this.remove.bind(this) 
     this.save = this.save.bind(this) 
    } 
    edit(){ 
     this.setState({editing: true}); 
    } 
    remove(){ 
     console.log("Removing comments"); 
    } 
    save(){ 
     var val = this.refs.newText.value; 
     console.log (val); 
     this.setState({editing: false, textValue : val}); 
    } 
    renderNormal(){ 
     return(
      <div className = "comment-container"> 
       <div className = "comment-text">{this.state.textValue}</div> 
       <button onClick = {this.edit}>Edit</button> 
       <button onClick = {this.remove}>Remove</button> 
      </div> 
     ); 
    } 
    renderForm(){ 
     return(
      <div> 
       <textarea ref ="newText" ></textarea> 
       <button onClick = {this.save}>Save</button> 
      </div> 
     ); 
    } 
    render(){ 
     if (this.state.editing){ 
      return this.renderForm(); 
     }else{ 
      return this.renderNormal(); 
     } 
    } 
    } 

    class Board extends React.Component{ 
     constructor(props){ 
      super(props) 
      this.state = { 
      comments : ["Ira", "Nata", "Nina"] 
      } 
     } 

     render(){ 
      const myComp = this.state.comments.map((a) =>{ 
       return (
       <Comment textValue={a}/> 
      ) 
      }) 
      return (
        <div> 
        {myComp} 
        </div> 
      ) 
     } 
    } 

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

Quelle

2017-04-07 08:56:42

Reagieren js: mehrere untergeordnete Kommentare

Antwort

Verwandte Themen