[译]使用自定义Hook构建React模态组件

原文链接：dev.to/michaelburr… 作者：Michael Burrows

在本教程中，我们将构建一个自定义反应模式组件，可用于显示各种网络元素，包括：表单、警报消息或图像。

让我们从使用Create React App来设置我们的应用程序开始：

npx create-react-app react-modal

在/src文件夹中创建一个名为useModal.js的新文件，该文件将包含use Modal（）自定义钩子。定制钩子应该总是从使用开始，这样你就可以很快看出它是一个可重复使用的钩子：

import { useState } from 'react';



const useModal = () => {

  const [visible, setVisible] = useState(false);

  function toggle() {

    setVisible(!visible);    

  }

  return {toggle, visible}

};



export default useModal;

也在/src文件夹中为mod al组件本身创建一个名为Modal.js的新文件：

import React from "react";

import ReactDOM from "react-dom";



const Modal = ({ visible, toggle }) => visible ? ReactDOM.createPortal(

  <div className="modal">

    <div className="modal-pop" role="dialog" aria-modal="true">

      <h3>Hello World</h3>

      <p>Et sit saepe velit tenetur et consequatur in. Nihil doloribus nulla nulla rem. Soluta illo et asperiores numquam earum nesciunt. Vero odio voluptatem sunt sunt laboriosam.</p>

      <button type="button" onClick={toggle}>Close</button>

    </div>  

    <div className="modal-overlay"></div>    

  </div>, document.body

) : null;



export default Modal;

如果可见，我们使用Portal将模式呈现为存在于父组件DOM层次结构之外的DOM节点，在本例中为。这是因为模态需要是页面中的最后一个DOM元素，以满足可访问性要求。

我们现在可以通过修改App.js文件来把它拉在一起，如下所示：

import Modal from './Modal';

import useModal from './useModal';

import './App.css';



const App = () => {

  const {toggle, visible} = useModal();

  return (

    <div className="App">

      <button onClick={toggle}>Show Modal</button>

      <Modal visible={visible} toggle={toggle} />

    </div>

  );

}



export default App;

最后添加一些基本的CSS到App.css以便我们可以测试功能：

.modal-pop {

  background: #fff;

  border: 2px solid #aaa;

  border-radius: 5px;  

  z-index: 999;

  max-width: 420px;

  margin: auto;

  padding: 1em 2em 2em;

  position: relative;

}

.modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 99;

  background-color: #000;

  opacity: 0.75;

}

现在可以通过运行npm start命令来测试该模式。

虽然这个例子很简单，但它演示了如何构建一个功能模态组件，您可以自定义该组件，以便在未来的项目中使用。感谢您的阅读，一定要查看我关于构建React组件的其他教程。