ReactJS 需要从 class 组件外部调用函数
ReactJS need to call function from outside class component
我有一些第三方代码需要能够从外部调用函数
//**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;
所以我尝试调用的不是子组件或父组件,而是 class 组件之外的代码。因此我不知道 Ref
是如何工作的。
我在 React 组件之外拥有更多 SurveyJS 第 3 方代码,这是此代码在外部运行的最大原因。
我有哪些选择?
我认为您最好的选择是向 SectionE
组件添加一个道具,然后收听该道具的更新,例如在添加 SectionE
的位置添加一个名为 "visible" 的道具,您可以在其中从 SectionE class:
外部设置可见变量
<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
}
}
我有一些第三方代码需要能够从外部调用函数
//**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;
所以我尝试调用的不是子组件或父组件,而是 class 组件之外的代码。因此我不知道 Ref
是如何工作的。
我在 React 组件之外拥有更多 SurveyJS 第 3 方代码,这是此代码在外部运行的最大原因。
我有哪些选择?
我认为您最好的选择是向 SectionE
组件添加一个道具,然后收听该道具的更新,例如在添加 SectionE
的位置添加一个名为 "visible" 的道具,您可以在其中从 SectionE class:
<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
}
}