ReactJS нужно вызывать функцию из внешнего компонента класса - PullRequest
Новая
       24

ReactJS нужно вызывать функцию из внешнего компонента класса

0 голосов
/ 08 ноября 2019

У меня есть несколько различных сторонних кодов, в которых мне нужно иметь возможность вызывать функцию извне 

//**Import**

import React from 'react'
// .... etc..

//**function I need to have call the function inside react component**

function showDescription(element) {
    // NEED to call function inside component class 
    this.

}

//**Class Component is here and notice state is set, and onClick had bind**

class SectionE extends React.Component {
    constructor(props){
        super(props);
        this.state = {
          visible: false   // setting to true will display the modal dialog box
        }
        this.onClick = this.onClick.bind(this);
    }

//**This is the What I want to call from outside!**     

    onClick() {
        this.setState({visible: true}); // show modal dialog
    }

//**Mount, calling in here works fine**         

    componentDidMount() {

        //this works as another test
        // this.onClick();
    }   

     render()
    {
        return(

//**Testing calling is works fine (Inside )**

    // manually show dialog   this works
   <button type="button" icon="pi pi-external-link" onClick={this.onClick} className="btn btn-primary" id="btnImportant">Add Important People</button>

//**3rd party primereact modal dialog** 

     <Dialog id="modal" header="Important People for ...." visible={this.state.visible} style={{width: '75vw'}} footer={footer} onHide={this.onHide} maximizable>
                    <ImportantFamily/>
     </Dialog>
     )
    }
}

 export default SectionE;

Так что я пытаюсь вызвать не дочерний компонент или родительский элемент, нокод за пределами компонента класса. Таким образом, я не вижу, как Ref будет работать.

Существует намного больше кода с кодом стороннего разработчика SurveyJS, который у меня есть вне компонента реагирования, и это главная причина, по которой этот код функционирует снаружи.

Какие у меня варианты?

1 Ответ

0 голосов
/ 08 ноября 2019

Я думаю, что вашим лучшим вариантом будет добавить реквизит для вашего SectionE компонента, а затем прослушать обновления этого реквизита, например, где вы добавляете SectionE добавить реквизит с именем "visible", где вы можете установить эту видимую переменнуюизвне класса SectionE: 

<SectionE visible={visible} />

Затем сделайте что-нибудь внутри вашего SectionE, когда оно изменится: 

// this is inside your SectionE class:
componentDidUpdate(prevProps) {
    if (prevProps.visible !== this.props.visible) {
        this.setState({visible: this.props.visible}); // show/hide modal dialog
    }
}
...