Je souhaite appeler une méthode exposée par un composant React à partir de l'instance d'un élément React.

Par exemple, dans ce fichier jsfiddle . Je veux appeler la alertMessageméthode à partir de la HelloElementréférence.

Existe-t-il un moyen d'y parvenir sans avoir à écrire des wrappers supplémentaires?

Edit (code copié de JSFiddle)

<div id="container"></div>
<button onclick="onButtonClick()">Click me!</button>

var onButtonClick = function () {

    //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage()
    console.log("clicked!");
}

var Hello = React.createClass({displayName: 'Hello',

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

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

var HelloElement = React.createElement(Hello, {name: "World"});

React.render(
    HelloElement,
    document.getElementById('container')
);

Il existe deux manières d'accéder à une fonction interne. Un niveau d'instance, comme vous le souhaitez, un autre niveau statique.

Exemple

Vous devez appeler la fonction au retour de React.render. Voir ci-dessous.

Statique

Jetez un œil à ReactJS Statics . Notez, cependant, qu'une fonction statique ne peut pas accéder aux données au niveau de l'instance, ce thisserait le cas undefined.

var onButtonClick = function () {
    //call alertMessage method from the reference of a React Element! 
    HelloRendered.alertMessage();
    //call static alertMessage method from the reference of a React Class! 
    Hello.alertMessage();
    console.log("clicked!");
}

var Hello = React.createClass({
    displayName: 'Hello',
    statics: {
        alertMessage: function () {
            alert('static message');
        }
    },
    alertMessage: function () {
        alert(this.props.name);
    },

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

var HelloElement = React.createElement(Hello, {
    name: "World"
});

var HelloRendered = React.render(HelloElement, document.getElementById('container'));

Alors fais HelloRendered.alertMessage().

Tu peux faire comme

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;

Maintenant de l'extérieur de ce composant, vous pouvez appeler comme ceci ci-dessous

window.helloComponent.alertMessage();

J'ai fait quelque chose comme ça:

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});
    }

}

Et puis ailleurs:

class Pasture extends React.Component {

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

    cowMounted (callbacks) {
        this.cowCallbacks = callbacks;
    }

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

}

Je n'ai pas testé ce code exact, mais c'est dans le sens de ce que j'ai fait dans un de mes projets et cela fonctionne bien :). Bien sûr, c'est un mauvais exemple, vous devriez simplement utiliser des accessoires pour cela, mais dans mon cas, le sous-composant a fait un appel d'API que je voulais garder à l'intérieur de ce composant. Dans un tel cas, c'est une bonne solution.

La renderméthode rendant potentiellement obsolète la valeur renvoyée, l'approche recommandée consiste maintenant à attacher une référence de rappel à l'élément racine. Comme ça:

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

auquel nous pouvons ensuite accéder en utilisant window.helloComponent, et n'importe laquelle de ses méthodes est accessible avec window.helloComponent.METHOD.

Voici un exemple complet:

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');
 }
}

Vous pouvez appeler cette méthode depuis la fenêtre en utilisant window.alertMessage().

Si vous êtes dans ES6, utilisez simplement le mot-clé "static" sur votre méthode de votre exemple serait le suivant: static alertMessage: function() { ...
},

L'espoir peut aider n'importe qui là-bas :)

Vous pouvez simplement ajouter un onClickgestionnaire au div avec la fonction ( onClickc'est la propre implémentation de React onClick) et vous pouvez accéder à la propriété entre { }accolades, et votre message d'alerte apparaîtra.

Si vous souhaitez définir des méthodes statiques qui peuvent être appelées sur la classe de composant, vous devez utiliser la statique. Bien que:

"Les méthodes définies dans ce bloc sont statiques, ce qui signifie que vous pouvez les exécuter avant la création de toute instance de composant et que les méthodes n'ont pas accès aux accessoires ou à l'état de vos composants. Si vous souhaitez vérifier la valeur des accessoires dans un fichier statique méthode, demandez à l'appelant de transmettre les accessoires en tant qu'argument de la méthode statique. " ( source )

Quelques exemples de code:

    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);

J'espère que cela vous aidera un peu, car je ne sais pas si j'ai bien compris votre question, alors corrigez-moi si je l'ai mal interprétée :)

Il semble que la statique soit obsolète et que les autres méthodes d'exposition de certaines fonctions rendersemblent alambiquées. Pendant ce temps, cette réponse de Stack Overflow sur le débogage de React , bien que semblant hack-y, a fait le travail pour moi.

méthode 1 using ChildRef :

public childRef: any = React.createRef<Hello>();

public onButtonClick= () => {
    console.log(this.childRef.current); // this will have your child reference
}

<Hello ref = { this.childRef }/>
<button onclick="onButtonClick()">Click me!</button>

Méthode 2: using window register

public onButtonClick= () => {
    console.log(window.yourRef); // this will have your child reference
}

<Hello ref = { (ref) => {window.yourRef = ref} }/>`
<button onclick="onButtonClick()">Click me!</button>

Avec React hook - useRef

const MyComponent = ({myRef}) => {
  const handleClick = () => alert('hello world')
  myRef.current.handleClick = handleClick
  return (<button onClick={handleClick}>Original Button</button>)
}

MyComponent.defaultProps = {
  myRef: {current: {}}
}

const MyParentComponent = () => {
  const myRef = React.useRef({})
  return (
    <>
      <MyComponent 
        myRef={myRef}
      />
      <button onClick={myRef.curent.handleClick}>
        Additional Button
      </button>
    </>
  )
}

Bonne chance...

J'utilise cette méthode d'assistance pour rendre les composants et renvoyer une instance de composant. Des méthodes peuvent être appelées sur cette instance.

static async renderComponentAt(componentClass, props, parentElementId){
         let componentId = props.id;
        if(!componentId){
            throw Error('Component has no id property. Please include id:"...xyz..." to component properties.');
        }

        let parentElement = document.getElementById(parentElementId);

        return await new Promise((resolve, reject) => {
            props.ref = (component)=>{
                resolve(component);
            };
            let element = React.createElement(componentClass, props, null);
            ReactDOM.render(element, parentElement);
        });
    }