javascript - 如何在reactjs中将值/对象从底部传输到顶部

Question

Reactjs 使数据注入(inject)变得非常简单，我们可以通过 this.props 或 this.state 对象通过父元素注入(inject)数据。至于从下到上传递值，我们可以指定一个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();
  }
});