Вызовите метод React Component в магистральном контроллере / классе

Question

Я работаю над сборкой проекта с помощью Backbone JS, мы используем архитектуру, описанную в азбуке. У нас есть модели, представления и контроллеры, которые их соединяют.

Мы недавно начали создавать некоторые компоненты React, и у меня была задача переделать форму Handlebars + JQ в форму React.

Итак, я сделал это, но теперь у меня есть проблема: мне нужно иметьспособ получить состояние компонентов формы, которое содержит данные.

До сих пор в форме руля + 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 (форма, $ el)

Answer 1

Ссылка не требуется, ReactDOM.render уже возвращает ссылку для отрендеренного компонента:

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

Так что к нему можно будет обратиться позже как this.instance.getFormData().Кроме того, состояние компонента является общедоступным и не требует получения getFormData, его можно получить с помощью this.instance.state.