React 組件中另一個文件中的 React JS 調用函數

Question

我創建了一個函數，它是一個名為Modal.js文件的單獨 React 組件，我想調用打開 Modal 另一個 React 組件的按鈕 - 我該如何實現？

Modal.js

class Modal extends React.Component {
  state = {
    loginOpened: false,
    signupOpened: false
  };

  openModal = modalType => () => {
    if (modalType === "login") {
      this.setState({
        loginOpened: true,
        signupOpened: false
      });
    } else if (modalType === "signup") {
      this.setState({
        loginOpened: false,
        signupOpened: true
      });
    }
  };

  closeModal = modalType => () => {
    if (modalType === "login") {
      this.setState({
        loginOpened: false
      });
    } else if (modalType === "signup") {
      this.setState({
        signupOpened: false
      });
    }
  };

    render() {
      return (
          <>
              <Modal isOpen={loginOpened} onRequestClose={this.closeModal("login")}>
                <h1>Login</h1>
                <button onClick={this.openModal("signup")}>Open Signup</button>
                <button onClick={this.closeModal("login")}>Close this modal</button>
              </Modal>

              <Modal isOpen={signupOpened} onRequestClose={this.closeModal("signup")}>
                <h1>Sign Up</h1>
                <button onClick={this.openModal("login")}>Open Login</button>
                <button onClick={this.closeModal("signup")}>Close this modal</button>
              </Modal>

              <button onClick={this.openModal("login")}>Open Login</button>
              <button onClick={this.openModal("signup")}>Open Signup</button>
          </>
      );
    }
}

  export default Modal;

我想把它移到Navigation.js所以當這些按鈕被點擊時，模態窗口將被調用

<button onClick={this.openModal("login")}>Open Login</button>
<button onClick={this.openModal("signup")}>Open Signup</button>

Answer 1

實現這一點的最簡單方法是通過Context 。

您應該擁有的文件是：

// ModalContext.js
import {createContext} from 'react'

export default createContext()

// Root.js -> This file should be on top of your application
import React from 'react'
import ModalContext from './ModalContext'

class ModalProvider extends React.Component {
  state = {
    loginOpened: false,
    signupOpened: false
  };

  openModal = modalType => () => {
    if (modalType === "login") {
      this.setState({
        loginOpened: true,
        signupOpened: false
      });
    } else if (modalType === "signup") {
      this.setState({
        loginOpened: false,
        signupOpened: true
      });
    }
  };

  closeModal = modalType => () => {
    if (modalType === "login") {
      this.setState({
        loginOpened: false
      });
    } else if (modalType === "signup") {
      this.setState({
        signupOpened: false
      });
    }
  };

  render(props) {
    return 
      <ModalContext.Provider value={{openModal: this.openModal, closeModal: this.closeModal}}>
        <Modal isOpen={loginOpened} onRequestClose={this.closeModal("login")}>
          <h1>Login</h1>
          <button onClick={this.openModal("signup")}>Open Signup</button>
          <button onClick={this.closeModal("login")}>Close this modal</button>
        </Modal>
        <Modal isOpen={signupOpened} onRequestClose={this.closeModal("signup")}>
           <h1>Sign Up</h1>
           <button onClick={this.openModal("login")}>Open Login</button>
           <button onClick={this.closeModal("signup")}>Close this modal</button>
        </Modal>
        {props.children}
      </ModalContext.Provider>
    )
  }
}

export default

// Anywhere where you need to control your modals
import ModalContext from './ModalContext'

class MyComponent extends React.Component {
  ...
  render(props) {
    return (
      <ModalContext.Consumer>
        {({openModal, closeModal}) => <button onClick={openModal("login")}>Open Login</button>}
      </ModalContext.Consumer>
    )
  }
}

您可以在此處查看有關上下文的更多信息