Bir React Element örneğinden bir React bileşeni tarafından gösterilen bir yöntemi çağırmak istiyorum.

Örneğin, bu jsfiddle'da . alertMessageYöntemi HelloElementreferanstan çağırmak istiyorum .

Ek paketler yazmak zorunda kalmadan bunu başarmanın bir yolu var mı?

Düzenle (JSFiddle'dan kod kopyalandı)

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

Bir iç işleve erişmenin iki yolu vardır. İstediğiniz gibi bir örnek düzeyi, başka bir statik düzey.

Örnek

Dönüşte işlevi çağırmanız gerekir React.render . Aşağıya bakınız.

Statik

ReactJS Statics'e bir göz atın . Bununla birlikte, statik bir işlev değil erişim örneği düzeyindeki veriler, bu nedenle ki thisolacaktır 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'));

O zaman yap HelloRendered.alertMessage().

Beğenebilirsin

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;

Şimdi bu bileşenin dışından aşağıdaki gibi arayabilirsin

window.helloComponent.alertMessage();

Bunun gibi bir şey yaptım:

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

}

Ve sonra başka bir yerde:

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

}

Bu kodu tam olarak test etmedim, ancak bu benim bir projemde yaptığım şey doğrultusunda ve güzel çalışıyor :). Elbette bu kötü bir örnek, bunun için sadece props kullanmalısınız, ancak benim durumumda alt bileşen, o bileşenin içinde tutmak istediğim bir API çağrısı yaptı. Böyle bir durumda bu güzel bir çözüm.

İle renderyöntem potansiyel olarak dönen değeri küçümseyen, tavsiye edilen yaklaşım kök elemana bir geri arama ref eklemek şimdi. Bunun gibi:

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

daha sonra window.helloComponent kullanarak erişebiliriz ve yöntemlerinden herhangi birine window.helloComponent.METHOD ile erişilebilir.

İşte tam bir örnek:

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

Bu yöntemi kullanarak pencereden çağırabilirsiniz window.alertMessage().

ES6 içindeyseniz, yönteminizdeki örneğinizdeki "statik" anahtar kelimesini kullanın: static alertMessage: function() { ...
},

Umut oradaki herkese yardım edebilir :)

İle 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>
    </>
  )
}

İyi şanslar...

onClickFonksiyonla onClickdiv'e bir işleyici ekleyebilirsiniz ( React'in kendi uygulamasıdır onClick) ve özelliğe içinden erişebilirsiniz.{ } küme ayraçları ve uyarı mesajınız görünecektir.

Bileşen sınıfında çağrılabilecek statik yöntemler tanımlamak istemeniz durumunda - statiği kullanmalısınız. Olmasına rağmen:

"Bu blokta tanımlanan yöntemler statiktir, yani bunları herhangi bir bileşen örneği oluşturulmadan önce çalıştırabilirsiniz ve yöntemlerin bileşenlerinizin prop'larına veya durumuna erişimleri yoktur. Statik bir yöntemi, çağıranın statik yönteme bir argüman olarak props'a geçmesini sağlayın. " ( kaynak )

Bazı örnek kodlar:

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

Umarım bu size biraz yardımcı olur, çünkü sorunuzu doğru anlayıp anlamadığımı bilmiyorum, bu yüzden yanlış yorumladıysam düzeltin :)

Görünüşe göre statikler kullanımdan kaldırılmış ve bazı işlevleri ortaya çıkarmanın diğer yöntemleri renderkıvrımlı görünüyor. O esnada, React'te hata ayıklama hakkındaki bu Stack Overflow yanıtı , hack-y gibi görünse de, işi benim için yaptı.

yöntem 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>

Yöntem 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>

Bileşenleri işlemek ve bir bileşen örneği döndürmek için bu yardımcı yöntemi kullanıyorum. Yöntemler bu örnekte çağrılabilir.

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