反應js：多個孩子的評論

我想問你一些關於React.js的問題。現在我正在做一些React.js練習，看來我犯了一些錯誤。它應該保存，刪除和編輯按鈕，textarea。當你點擊編輯按鈕時，textarea出現。當你點擊保存按鈕時，所有的東西都會返回到默認狀態。反應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>

我該怎麼辦錯了嗎？問候函

來源

2017-04-07 Aleks339

您正在試圖在普通js中使用JSX，而不使用轉換器，因此出現空白屏幕（控制檯中也會出現一些錯誤）。

JSX不過是一個在html中使用html標籤和結構的奇特詞（例如：參見渲染函數）。

此前，有一種方法可以在瀏覽器中編譯JSX，但似乎不推薦使用（https://facebook.github.io/react/jsx-compiler.html）。您可以使用其中提供的其他鏈接進行在線編輯。

更好的選擇是設置節點並使用create-react-app（詳情請見：https://github.com/facebookincubator/create-react-app）。這樣，您就可以使用各種各樣的庫和實用程序。 PS：每當有疑問時，請檢查Chrome開發者工具（右鍵單擊屏幕>檢查元素）。

來源

2017-04-07 06:49:31

你的代碼有一些錯字錯誤。如果你打開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，這對調試非常有幫助並檢查狀態（道具）的值。

來源

2017-04-07 07:36:45

將代碼從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'));

來源

2017-04-07 08:56:42

反應js：多個孩子的評論

回答

相關問題