javascript - 从外部调用 React 组件

Question

是否可以从外部调用 React 组件？例如

HTML

<div id='react-app'></div>

<button onClick=callReactModal()>PressME</button>

我想要调用方法的组件

let callReactModal = function () {
  console.log('clicked');
  //Navigation.sayHello();
}

class Navigation extends React.Component<any, any> {

  constructor(props:any){
    super(props);

    this.state = {
      language: {
        lang: cookie.load('lang') || ''
      }
    };
    this.click = this.click.bind(this);
  }

  sayHello = () => {
    alert("Hello");
  }
}

我必须从另一个组件调用 Modal，但我不知道如何实现。

尝试在类中调用更新state的方法并得到Warning: setState(...): Can only update a mounted or mounting component. 它需要打开模态(使用语义用户界面)

使用状态的方法

handleOpen = (e) => this.setState({
        modalOpen: true,
    })

模态部分

<Modal size='small'
                   open={this.state.modalOpen}
                   onClose={this.handleClose}
                   trigger={<a className="btn btn-base" onClick={this.handleOpen}>Login</a>}
                   closeIcon='close'>

感谢您的帮助!

Answer 1

虽然不是最佳实践。你必须在窗口中设置 callReactModal 函数

window.callReactModal = function () {
  console.log('clicked');
  //Navigation.sayHello();
}

实现它的更好方法是创建一个事件监听器，在触发时打开模式。