如何在 React 中从另一个组件调用组件的方法

How can I call a component's method from another component in React?

本文关键字：组件 调用 方法 另一个 React      更新时间：2023-09-26

我有一个模态组件，其中包含两个显示/隐藏模态的方法。如何从另一个组件调用这些方法？

这是模态的代码：

// Dependencies
//==============================================================================
import React from 'react'
import Modal from 'boron/DropModal'
// Class definition
//==============================================================================
export default class RegistrationModal extends React.Component {
  showRegistrationModal() {
    this.refs.registrationModal.show()
  }
  hideRegistrationModal() {
    this.refs.registrationModal.hide()
  }
  render() {
    return (
      <Modal ref="registrationModal" className="modal">
        <h2>Meld je aan</h2>
        <button onClick={this.hideRegistrationModal.bind(this)}>Close</button>
      </Modal>
    )
  }
}
只要

保留对组件的引用，就可以从外部调用组件方法。例如：

let myRegistrationModal = ReactDOM.render(<RegistrationModal />, approot );
    // now you can call the method:
    myRegistrationModal.showRegistrationModal()

如果将对模态的引用传递给另一个组件（如按钮），则会更简洁一些：

let OpenModalButton = props => (
  <button onClick={ props.modal.showRegistrationModal }>{ props.children }</button>
);
let myRegistrationModal = ReactDOM.render(<RegistrationModal />, modalContainer );
ReactDOM.render(<OpenModalButton modal={ myRegistrationModal }>Click to open</OpenModalButton>, buttonContainer );

工作示例：http://jsfiddle.net/69z2wepo/48169/

您不能从另一个组件调用它，因为它是属于RegistrationModal组件的方法，但您可以重构代码以便可以调用它

export function hideRegistrationModal() {
  console.log("ok");
}
export default class RegistrationModal extends React.Component {
  render() {
    return (
      <Modal ref="registrationModal" className="modal">
        <h2>Meld je aan</h2>
        <button onClick={hideRegistrationModal}>Close</button>
      </Modal>
    )
  }
}

现在您可以从任何地方拨打电话，但您需要像这样先导入它

import { RegistrationModal, hideRegistrationModal } from 'path to modal.js'
//       ^-- Component name  ^-- Method

您要做的是创建一个父组件，该组件将处理模态之间的通信。

一个非常好的例子和解释可以在这里找到：ReactJS两个组件通信

这是一个很好的方法，因为它可以使您的组件分离。

相关文章：