2017-04-07 8 views
0

React.jsについて質問したいと思います。今私はReact.jsのエクササイズをやっています。私はいくつかの間違いをしたようです。ボタン、テキストエリアを保存、削除、編集する必要があります。編集ボタンをクリックすると、テキストエリアが表示されます。保存ボタンをクリックすると、すべてのものがデフォルトの状態に戻ります。React js:複数の子コメント

しかし、コンピュータに空の画面が表示されます。ここで

は私のコードです:

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

は私が間違って何をしますか? よろしくお願いします。

答えて

1

トランスフォーマーを使用せずにプレーンj内でJSXを使用しようとしています。そのため、空白の画面が表示されます(コンソールにもエラーがあります)。

JSXは、javascript内でhtmlタグと構造を使用するための素晴らしい言葉です(例:レンダリング機能を参照)。

以前、ブラウザ自体にJSXをコンパイルする方法がありましたが、廃止されているようです(https://facebook.github.io/react/jsx-compiler.html)。あなたはそこに用意されている他のリンクを使って、オンラインでreplを使うことができます。

より良いオプションは、ノードをセットアップし、create-react-app(詳細はhttps://github.com/facebookincubator/create-react-app)を使用することです。こうすることで、膨大な数のライブラリやユーティリティを使用することができます。

PS:疑わしいときはいつでも、Chromeの開発者ツール(画面>要素を右クリック)を確認してください。

0

コードにいくつかの誤植がありました。 Chrome開発者ツールを開くと、それが表示されます。私は以下のようにコードを修正しています

1)getInitialScale - >getInitialState

getInitialState

2)戻り値は

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>

のほかのオブジェクトでなければならない、あなたをChrome用にReact Developer Toolsをインストールする必要があります。デバッグすると非常に便利です状態(小道具)の値をチェックします。

0

DOMからコードを分離することは、常に良い習慣です。したがって、ファイル "abc.js"を作成してこれをコピーすることができます。あなたのコードをReact形式に変換しましたが、現在は動作しています。

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')); 
関連する問題