如何在 reactjs 中将 value/object 从下到上传输

Question

Reactjs 使数据注入变得非常简单，我们可以通过父元素通过 this.props 或 this.state 对象注入数据。至于从下往上传递值，我们可以指定一个ref属性，然后使用dom方法获取或编辑它。

如果我想像这样传输一个对象怎么办：

var Editor = React.createClass({
  componentDidMount: function() {
    var editor = new CodeMirror(this.getDOMNode());
    this.editor = editor;
  },

  render: function() {
    return (
      <div className="editor"></div>
    );
  }
});

var App = React.createClass({
  render: function() {
    return (
      <Editor />
      <button onClick={this._save}></button>
    );
  },

  _save: function() {
    // now I'm confused how can I get `editor` object?
  }
});

我确实考虑过通过属性传递它，例如：data-editor，但是在 reactjs 中是否有任何优雅或推荐的方法来处理这种情况？

提前致谢。

Answer 1

有多种方法可以做到这一点。一种是为元素分配一个 ref 并公开一个方法来获取编辑器或仅获取值：

var Editor = React.createClass({
  componentDidMount: function() {
    var editor = new CodeMirror(this.getDOMNode());
    this.editor = editor;
  },

  render: function() {
    return (
      <div className="editor"></div>
    );
  }

  getEditor: function() {
    return this.editor;
  }
});

var App = React.createClass({
  render: function() {
    return (
      <Editor ref="editor"/>
      <button onClick={this._save}></button>
    );
  },

  _save: function() {
    var editor = this.refs.editor.getEditor();
  }
});

如何在 reactjs 中将 value/object 从下到上传输

How to transfer a value/object bottom to top in reactjs

javascript

reactjs