使用 ReactJS 创建 HTML 编辑器组件

Question

React 新手，如果我走错了路，请指出：我正在尝试构建一个 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 字符串正在服务器上生成，并且在错误消息中有一个换行符指向的位置。我应该做什么？

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

更新

根据 documentation，您可以使用 \n 换行。第一个解决方案在 value prop.

周围缺少 {}

新的 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);

使用 ReactJS 创建 HTML 编辑器组件

Creating an HTML editor component with ReactJS

reactjs