Как осуществить взаимодействие между React и не-React частью кода на странице? И как добавить метод React элементу?

Question

[KnightForce]

Задался вопросом:
Если часть страницы на React, а другая нет, но взаимодействовать как-то нужно.
Как лучше всего осуществить.

А также, как лучше всего добавить методы?
Или они не нудны и если да, то какая альтернатива?

Типа такого:

let element = (
  <h1>
    Hello
  </h1>
);
element.someMethod=()=>{};
element.someMethod();

Answer 1

[Никита Гущин]

Для этого лучше всего использовать компонент как класс:

class MyElement extends Component {

  componentDidMount() {
    // начиная с этого момента у вас есть доступ к 
    // this.container - это ссылка на DOM ноду (или реакт-элемент)

   jQuery(this.container) // например используем джейквери

    // или вызовем метод элемента
    // выведет в консоль 'Wow, so super!'
    this.componentWithMethod.mySuperMethod()
  }

  handle3dPartyContainerRef = node => {
    this.container = node
  }

  handleComponentRef= node => {
    this.componentWithMethod= node
  }

  render() {
    return (
      <div>
        <h1>Hello!</h1>
        <div ref={this.handle3dPartyContainerRef}  />
        <ComponentWithMethod ref={this.handleComponentRef} />
      </div>
    )
  }
}


class ComponentWithMethod extends Component {
  mySuperMethod = () => {
     // Вот так можно добавить метод к элементу
    // вызывать его можно если получить ссылку на установленный в DOM элемент 
    console.log('Wow, so super!')
  }

  render() {
    return (
      <span>just a node</span>
    )
  }
}

Про ref в реакте есть документация.

Comments

[KnightForce]

А метод React компоненту? Это же объект по сути.)

[Никита Гущин]

KnightForce: компонент - это класс, чтобы добавить ему метод - сделайте статический метод (this будет недоступен). элемент - это инстанс компонента, чтобы добавить ему метод - добавьте метод в соответствующий класс (у меня в примере это ComponentWithMethod)