創建具有ReactJS的HTML編輯器組件

Question

新反應，請指出，如果我率領那錯誤的軌跡：我試圖建立一個HTML編輯器組件，它到目前爲止是這樣的：

var CopyEditor = React.createClass({ 
    render: function(){ 
    var pageBody = "<p>My HTML string ..."; 
    return (
     <form id="editForm" method="POST"> 
     <textarea id="editor" name="body" value=pageBody /> 
     <input type="submit" id="saveBt" value="save" class="button-primary" /> 
     </form> 
    ); 
    } 
}); 

但我發現了在控制檯下面的錯誤：正在服務器上生成

Uncaught Error: Parse Error: Line 6: Unexpected token ILLEGAL at http://localhost:8000/index.html

var pageBody = '
                           ^

我的HTML字符串，並有在carot在錯誤消息指向一個換行符。我應該做什麼？

Answer 1

你真的不需要dangerouslySetInnerHTML與textarea。你可以只用value道具：

http://jsfiddle.net/egkc7dbd/

var CopyEditor = React.createClass({ 
    onChange : function(){ 
    }, 
    render: function(){ 
    var pageBody = "<p>My HTML string ..."; 
    return (
     <form id="editForm" method="POST"> 
     <textarea id="editor" name="body" value="<p>My HTML string ..." onChange={this.onChange}/> 
     <input type="submit" id="saveBt" value="save" className="button-primary" /> 
     </form> 
    ); 
    } 
}); 

React.render(<CopyEditor/>, document.body); 

---

UPDATE

按照documentation你可以有換行符使用\n。第一個解決方案缺少{}約value道具。

新的jsfiddle：http://jsfiddle.net/jwb50xu9/

var CopyEditor = React.createClass({ 
    onChange : function(){ 
    }, 
    render: function(){ 
    var pageBody = "<p> \n My HTML string ..."; 
    return (
     <form id="editForm" method="POST"> 
     <textarea id="editor" name="body" value={pageBody} onChange={this.onChange}/> 
     <input type="submit" id="saveBt" value="save" className="button-primary" /> 
     </form> 
    ); 
    } 
}); 

React.render(<CopyEditor/>, document.body);