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

Question

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

这是模式的代码：

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

原文由 noodles_ftw 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 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/

原文由 pawel 发布，翻译遵循 CC BY-SA 3.0 许可协议