Вызвать метод компонента реагировать извне

Я сделал что-то вроде этого:

class Cow extends React.Component {

    constructor (props) {
        super(props)
        this.state = {text: 'hello'}
    }

    componentDidMount () {
        if (this.props.onMounted) {
            this.props.onMounted({
                say: text => this.say(text)
            })
        }
    }

    render () {
        return (
            <pre>
                 ___________________
                < {this.state.text} >
                 -------------------
                        \   ^__^
                         \  (oo)\_______
                            (__)\       )\/\
                                ||----w |
                                ||     ||
            </pre>
        )
    }

    say (text) {
        this.setState({text: text})
    }

}

а потом где-то еще:

class Pasture extends React.Component {

    render () {
        return (
            <div>
                <Cow onMounted={this.cowMounted.bind(this)} />
                <button onClick={this.changeCow.bind(this)} />
            </div>
        )
    }

    cowMounted (callbacks) {
        this.cowCallbacks = callbacks
    }

    changeCow () {
        this.cowCallbacks.say('moo')
    }

}

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

Вы можете сделать как

import React from 'react';

class Header extends React.Component{

    constructor(){
        super();
        window.helloComponent = this;
    }

    alertMessage(){
       console.log("Called from outside");
    }

    render(){

      return (
      <AppBar style={{background:'#000'}}>
        Hello
      </AppBar>
      )
    }
}

export default Header;

теперь из-за пределов этого компонента вы можете вызвать это ниже

window.helloComponent.alertMessage();

вы можете просто добавить onClick обработчик div с функцией (onClick это собственная реализация React onClick), и вы можете получить доступ к собственности в { } фигурные скобки, и ваше сообщение появится.

если вы хотите определить статические методы, которые могут быть вызваны в классе компонентов - вы должны использовать статику. Хотя:

"методы, определенные в этом блоке, являются статическими, что означает, что вы можете запускать их до того, как будут созданы какие-либо экземпляры компонентов создано, и методы не имеют доступа к реквизитам или состоянию ваших компонентов. Если вы хотите проверить значение props в статическом методе, пусть вызывающий объект передаст props в качестве аргумента статическому методу."(источник)

пример кода:

    const Hello = React.createClass({

        /*
            The statics object allows you to define static methods that can be called on the component class. For example:
        */
        statics: {
            customMethod: function(foo) {
              return foo === 'bar';
            }
        },


        alertMessage: function() {
            alert(this.props.name);                             
        },

        render: function () {
            return (
                <div onClick={this.alertMessage}>
                Hello {this.props.name}
                </div>
            );
        }
    });

    React.render(<Hello name={'aworld'} />, document.body);

надеюсь, что это поможет вам немного, потому что я не знаю, правильно ли я понял ваш вопрос, поэтому поправьте меня, если я интерпретировал его неправильно:)

похоже, статика устарела, а другие методы выставления некоторых функций с render показаться запутанным. Между тем, этот ответ переполнения стека об отладке React, в то время как кажущийся hack-y, сделал работу за меня.

Если вы находитесь в ES6, просто используйте ключевое слово "static" в своем методе из вашего примера: static alertMessage: function() { ...
},

Надежда может помочь любому там:)

С render метод потенциально устарел возвращаемое значение, рекомендуемый подход теперь заключается в присоединении ссылки обратного вызова к корневому элементу. Вот так:

ReactDOM.render( <Hello name="World" ref={(element) => {window.helloComponent = element}}/>, document.getElementById('container'));

который мы можем получить доступ с помощью окна.helloComponent,и любой из его методов могут быть доступны с помощью окна.хеллокомпонент.МЕТОД.

вот полный пример:

var onButtonClick = function() {
  window.helloComponent.alertMessage();
}

class Hello extends React.Component {
  alertMessage() {
    alert(this.props.name);
  }

  render() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
};

ReactDOM.render( <Hello name="World" ref={(element) => {window.helloComponent = element}}/>, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
<button onclick="onButtonClick()">Click me!</button>

class AppProvider extends Component {
  constructor() {
    super();

    window.alertMessage = this.alertMessage.bind(this);
  }

  alertMessage() {
    console.log('Hello World');
 }
}

Вы можете вызвать этот метод из окна с помощью window.alertMessage().