在主干控制器/类中调用 React 组件方法答案

【问题标题】：Call React Component Method in Backbone Controller/class在主干控制器/类中调用 React 组件方法
【发布时间】：2018-11-21 12:46:05
【问题描述】：

我正在使用 Backbone JS 构建项目，我们正在使用 az 描述的架构。我们有连接它们的模型、视图和控制器。

我们最近开始创建一些 React 组件，我有一个任务是重新制作 Handlebars + JQ Form 到 React Form。

所以我做到了，但现在我遇到了这个问题：我需要有一种方法来获取包含数据的表单组件的状态。

到目前为止，在车把 + JQ 形式中，我们有一个

_getFormData() { return jq_formData; }

简单使用JQ提取数据的方法，但是现在表单在React中，再用JQ就不好了。

表单将被初始化为

反应：

class Form extends Component {
   state = {}

   getFormData() { return this.state; }

   updateFormData (e) { this.setState({ [e.name]: e.value }) }

   render() { return ( ... Child InputsFields update={this.updateFormData} ...) }  

}

在骨干中：

 class View {
    $el = $('#formContainer'),

    // my idea is to have something like this 
    _getFormData(){
       return Form.getFormData() 
    }
    render () {
       ReactDOM.render(<Form {...formData} />, this.$el[0])
    }
 }

所以稍后我可以像这样使用控制器中的视图实例：

class Controler {
   this.view = new View();

   this.formData = this.view._getFormData(); // { name: 'tony', age: 34 }
}

我也教过如何使用

React.createRef()

但我不确定这需要如何实现

ReactDOM.render(form, $el)

【问题讨论】：

标签： javascript reactjs backbone.js callback

【解决方案1】：

不需要引用，ReactDOM.render 已经为渲染组件返回了引用：

this.instance = ReactDOM.render(<Form {...formData} />, this.$el[0]);

所以以后可以通过this.instance.getFormData() 访问它。另外，组件状态是公开的，不需要getFormData getter，可以通过this.instance.state获取。

【讨论】：