First, it is a commonly used modal popup component called Alert. Second, it contains hook, component call and JS call knowledge. It is suitable for beginners

Hook needs to know

What this article will do is an Alert popup, which can be displayed by component call or JS call, and then closed by clicking ok button. It looks very simple, but first step, we need to understand hook, but this article will not explain hook, you can go to the official website to have a look.

Here use useState,useEffect to control the display and hiding of the Alert popover. Initialize a variable (visible) with useState, return a function that sets state (setVisible), and useEffect to dynamically modify the variable (visible) by listening for changes in the props. Say a little vague, specific look at the code to speak:

import React, { useState, useEffect } from 'react'
import * as ReactDOM from 'react-dom'
import './index.less' // The style is not posted

function Alert(props) {
  // Use useState to initialize control variables
  const [ visible, setVisible ] = useState(props.visible)
  
  // Modify visible when external props. Visible changes
  useEffect(() = > {
    setVisible(props.visible);
  }, [props.visible]);

  // The callback function
  function handleConfirm(){
    setVisible(false)
    props.onConfirm&&props.onConfirm(false)}// The title,message value is externally controlled
  return (
    <React.Fragment>
      {visible && (
      <div className="alert-component">
        <div className="component-mark"></div>
        <div className="alert-container">
          <h3 className="alert-title">{props.title}</h3>
          <div className="alert-content">{props.message}</div>
          <div className="alert-btns">
            <button className="alert-confirm" onClick={handleConfirm}>{props. ConfirmText | | 'sure'}</button>
          </div>
        </div>
      </div>
      )}
    </React.Fragment>
  );
}

export default Alert

Copy the code

At this point, you have a simple function component, but now it can only be called from a component, so you can modify it to be called from JS.

In the Alert function, define a show property method, through which to call; In show, the Alert function itself is rendered through the ReactDOM and a close method is defined to remove the Alert. Not very clear, specific look at the code to speak:

Alert.show = function (title,message,cb) {
  const div = document.createElement('div')
  document.body.appendChild(div)

  ReactDOM.render(<Alert visible={true} title={title} message={message} onConfirm={close}/>, div)
    
  // Remove the corresponding DOM node when closing
  function close(){
    ReactDOM.unmountComponentAtNode(div)
    if (div && div.parentNode) {
      div.parentNode.removeChild(div) 
    }
    cb&&cb() // Close the popover callback function
  }
  // Return close, can be manually closed outside, but this component does not need to be manually closed outside, do not return
  return close
};

Copy the code

call

The first is the component call:

const [showAlert,setShowAlert] = useState(false)... <Alert visible={showAlert} title="Warm reminder" 
  message={<p>wahaha</p>}
  onConfirm={() = >setShowAlert(false)} / >Copy the code

Next comes the js call:

<button onClick={() = >{
    const closeCb = Alert.show('Warm reminder'.'Wahaha')
    setTimeout(closeCb,20*1000) // Automatic shutdown with a delay of 20 seconds}}>js </button>Copy the code

conclusion

Here is the end, is not fried chicken easy, you learned to have no