Saya ingin memanggil metode yang diekspos oleh komponen React dari instance Elemen React.

Misalnya, di jsfiddle ini . Saya ingin memanggil alertMessagemetode dari HelloElementreferensi.

Adakah cara untuk mencapai ini tanpa harus menulis pembungkus tambahan?

Edit (kode disalin dari 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')
);

Ada dua cara untuk mengakses fungsi batin. Satu, tingkat instance, seperti yang Anda inginkan, yang lainnya, tingkat statis.

Contoh

Anda perlu memanggil fungsi saat kembali dari React.render. Lihat di bawah.

Statis

Lihat ReactJS Statics . Perhatikan, bagaimanapun, bahwa fungsi statis tidak dapat mengakses data tingkat instance, begitu thisjuga 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'));

Lalu lakukan HelloRendered.alertMessage().

Anda bisa melakukan seperti

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;

Nah dari luar komponen ini Anda bisa memanggil seperti ini di bawah ini

window.helloComponent.alertMessage();

Saya telah melakukan sesuatu seperti ini:

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

}

Dan kemudian di tempat lain:

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

}

Saya belum menguji kode persis ini, tetapi ini sejalan dengan apa yang saya lakukan dalam proyek saya dan berfungsi dengan baik :). Tentu saja ini adalah contoh yang buruk, Anda hanya perlu menggunakan props untuk ini, tetapi dalam kasus saya sub-komponen melakukan panggilan API yang ingin saya simpan di dalam komponen itu. Dalam kasus seperti ini, ini adalah solusi yang bagus.

Dengan rendermetode yang berpotensi menghentikan nilai yang dikembalikan, pendekatan yang disarankan sekarang adalah memasang callback ref ke elemen root. Seperti ini:

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

yang kemudian dapat kita akses menggunakan window.helloComponent, dan metodenya dapat diakses dengan window.helloComponent.METHOD.

Berikut contoh lengkapnya:

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

Anda dapat memanggil metode ini dari jendela dengan menggunakan window.alertMessage().

Jika Anda menggunakan ES6, cukup gunakan kata kunci "statis" pada metode Anda dari contoh Anda adalah sebagai berikut: static alertMessage: function() { ...
},

Semoga bisa membantu siapa saja di luar sana :)

Dengan 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.current.handleClick}>
        Additional Button
      </button>
    </>
  )
}

Semoga berhasil...

Anda bisa menambahkan onClickhandler ke div dengan fungsi ( onClickadalah implementasi React sendiri onClick) dan Anda bisa mengakses properti di dalam { }kurung kurawal, dan pesan peringatan Anda akan muncul.

Jika Anda ingin mendefinisikan metode statis yang bisa dipanggil pada kelas komponen - Anda harus menggunakan statika. Meskipun:

"Metode yang ditentukan dalam blok ini bersifat statis, artinya Anda dapat menjalankannya sebelum instance komponen apa pun dibuat, dan metode tersebut tidak memiliki akses ke props atau status komponen Anda. Jika Anda ingin memeriksa nilai props secara statis metode, minta pemanggil meneruskan props sebagai argumen ke metode statis. " ( sumber )

Beberapa kode contoh:

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

Semoga ini sedikit membantu Anda, karena saya tidak tahu apakah saya memahami pertanyaan Anda dengan benar, jadi perbaiki saya jika saya salah menafsirkannya :)

Tampaknya statika sudah ditinggalkan, dan metode lain untuk mengekspos beberapa fungsi rendertampaknya berbelit-belit. Sementara itu, jawaban Stack Overflow tentang debugging React ini , meski tampak hack-y, melakukan pekerjaan untuk saya.

metode 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>

Metode 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>

Saya menggunakan metode helper ini untuk membuat komponen dan mengembalikan contoh komponen. Metode dapat dipanggil pada contoh itu.

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