React.js - доступ к компонентным методам

124

Почему я не могу получить доступ к методам компонентов из "снаружи" в ReactJS? Почему это невозможно и есть ли способ его решить?

Рассмотрим код:

var Parent = React.createClass({
    render: function() {
        var child = <Child />;
        return (
            <div>
                {child.someMethod()} // expect "bar", got a "not a function" error.
            </div>
        );
    }
});

var Child = React.createClass({
    render: function() {
        return (
            <div>
                foo
            </div>
        );
    },
    someMethod: function() {
        return 'bar';
    }
});

React.renderComponent(<Parent />, document.body);
  • 0
    Может быть, вам нужен Pubsub ?
Теги:
dom

7 ответов

153
Лучший ответ

React предоставляет интерфейс для того, что вы пытаетесь сделать с помощью атрибута ref. Назначьте компонент a ref обратный вызов, и он будет вызываться со ссылкой на компонент при его рендеринге:

var Parent = React.createClass({
    componentDidMount: function() {
        console.log(this._child.someMethod()); // Prints 'bar'
    },
    render: function() {
        return (
            <div>
                <Child ref={(child) => { this._child = child; }} />
            </div>
        );
    }
});

Обновление 2016-09-19: Изменен пример использования обратного вызова ref, а не строки ref на руководство от ref String атрибут.

Примечание. Это будет работать, только если дочерний компонент объявлен как класс, как указано в документации: https://facebook.github.io/react/docs/refs-and-the-dom.html#adding-a-ref-to-a-class-component

Поделиться
  • 0
    Таким образом, единственный способ связи между двумя дочерними компонентами будет иметь оба refs и прокси-метод для общего родителя?
  • 14
    React поощряет компоненты, управляемые данными. Позвольте одному дочернему элементу вызвать обратный вызов, который изменяет данные в его предке, и когда эти данные изменятся, другой дочерний элемент получит новые props и выполнит повторную визуализацию соответствующим образом.
Показать ещё 3 комментария
36

В качестве альтернативы, если метод Child действительно статичен (а не продукт текущего реквизита, состояние), вы можете определить его на statics, а затем получить доступ к нему, как если бы вы использовали метод статического класса. Например:

var Child = React.createClass({
  statics: {
    someMethod: function() {
      return 'bar';
    }
  },
  // ...
});

console.log(Child.someMethod()) // bar
Поделиться
  • 1
    Источник для этого здесь .
35

Если вы хотите вызывать функции на компонентах извне React, вы можете вызвать их на возвращаемое значение renderComponent:

var Child = React.createClass({…});
var myChild = React.renderComponent(Child);
myChild.someMethod();

Единственный способ получить дескриптор экземпляра React Component вне React - это сохранить возвращаемое значение React.renderComponent. Источник.

Поделиться
  • 1
    Это больше не работает. Смотрите выше комментарий.
  • 1
    на самом деле это работает для реакции16. Метод рендеринга ReactDOM возвращает ссылку на компонент (или возвращает ноль для компонентов без сохранения состояния).
4

Так как React 0.12 API слегка изменился. Правильный код для инициализации myChild будет следующим:

var Child = React.createClass({…});
var myChild = React.render(React.createElement(Child, {}), mountNode);
myChild.someMethod();
Поделиться
  • 2
    И даже это уже устарело.
0

Начиная с React 16.3 React.createRef можно использовать, (используйте для доступа к ref.current)

var ref = React.createRef()

var parent = <div><Child ref={ref} /> <button onClick={e=>console.log(ref.current)}</div>

React.renderComponent(parent, document.body)
Поделиться
  • 0
    Очень элегантное решение и намного лучше, чем принятый ответ.
0

Как упоминалось в некоторых комментариях, ReactDOM.render больше не возвращает экземпляр компонента. Вы можете передать обратный вызов ref при рендеринге корня компонента для получения экземпляра, например:

// React code (jsx)
function MyWidget(el, refCb) {
    ReactDOM.render(<MyComponent ref={refCb} />, el);
}
export default MyWidget;

и

// vanilla javascript code
var global_widget_instance;

MyApp.MyWidget(document.getElementById('my_container'), function(widget) {
    global_widget_instance = widget;
});

global_widget_instance.myCoolMethod();
Поделиться
0

Вы могли также делать это, не уверен, что это хороший план: D

class Parent extends Component {
  handleClick() {
    if (this._getAlert !== null) {
      this._getAlert()
    }
  }

  render() {
    return (
      <div>
        <Child>
        {(getAlert, childScope) => (
          <span> {!this._getAlert ? this._getAlert = getAlert.bind(childScope) : null}</span>
        )}
        </Child>
        <button onClick={() => this.handleClick()}> Click me</button>
      </div>
      );
    }
  }

class Child extends Component {
  constructor() {
    super();
    this.state = { count: 0 }
  }

  getAlert() {
    alert(`Child function called state: ${this.state.count}`);
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return this.props.children(this.getAlert, this)
  }
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню