React Element의 인스턴스에서 React 컴포넌트에 의해 노출 된 메서드를 호출하고 싶습니다.

예를 들어,이 jsfiddle . 참조 에서 alertMessage메서드 를 호출하고 싶습니다 HelloElement.

추가 래퍼를 작성하지 않고도이를 달성 할 수있는 방법이 있습니까?

편집 (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')
);

내부 함수에 액세스하는 방법에는 두 가지가 있습니다. 하나, 인스턴스 수준, 원하는대로 다른 정적 수준.

예

에서 반환 할 때 함수를 호출해야합니다 React.render. 아래를 참조하십시오.

공전

ReactJS Statics를 살펴보십시오 . 단, 정적 기능을하지 액세스 인스턴스 레벨 데이터는 그렇게 할 수 this있을 것입니다 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'));

그런 다음 HelloRendered.alertMessage().

당신은 좋아할 수 있습니다

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

다음과 같이했습니다.

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={callbacks => this.cowMounted(callbacks)} />
                <button onClick={() => this.changeCow()} />
            </div>
        );
    }

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

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

}

나는이 정확한 코드를 테스트하지 않았지만 이것은 내가 내 프로젝트에서 한 일과 잘 어울립니다. :). 물론 이것은 나쁜 예입니다. props를 사용해야하지만 제 경우에는 하위 구성 요소가 해당 구성 요소 내부에 유지하려는 API 호출을 수행했습니다. 그러한 경우 이것은 좋은 해결책입니다.

와 render방법은 잠재적으로 반환 값을 비하, 권장되는 방법은 루트 요소에 콜백 심판을 첨부 할 지금이다. 이렇게 :

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

그런 다음 window.helloComponent를 사용하여 액세스 할 수 있으며 해당 메서드는 window.helloComponent.METHOD를 사용하여 액세스 할 수 있습니다.

다음은 전체 예입니다.

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().

ES6에있는 경우 예제의 메서드에 "static"키워드를 사용하면 다음과 같습니다. static alertMessage: function() { ...
},

희망은 누구든지 도울 수 있습니다 :)

onClick함수 ( onClickReact의 자체 구현 onClick) 를 사용하여 div에 핸들러를 추가하고 { }중괄호로 속성에 액세스 할 수 있으며 경고 메시지가 나타납니다.

컴포넌트 클래스에서 호출 할 수있는 정적 메소드를 정의하려면 정적을 사용해야합니다. 이기는 하지만:

"이 블록 내에서 정의 된 메서드는 정적입니다. 즉, 구성 요소 인스턴스가 생성되기 전에 실행할 수 있으며 메서드는 구성 요소의 상태 또는 소품에 액세스 할 수 없습니다. 정적에서 소품의 값을 확인하려는 경우 메서드의 경우 호출자가 정적 메서드에 대한 인수로 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 디버깅에 대한이 Stack Overflow 답변은 해킹처럼 보이지만 나를 위해 일했습니다.

방법 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>

방법 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>

와 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>
    </>
  )
}

행운을 빕니다...

이 도우미 메서드를 사용하여 구성 요소를 렌더링하고 구성 요소 인스턴스를 반환합니다. 해당 인스턴스에서 메서드를 호출 할 수 있습니다.

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