antd model 组件的复用（hooks）

场景：当很多个 1结构类似的 modle 弹窗 出现时：可以采用以下办法 用hooks 巧妙 复用。

modle1：
<div
              className={styles.toollink}
              onClick={() => {
                setModalTitle(intl.formatMessage({ id: 'pcHome.toolbarItem1' }));
                setModalContent(
                  <div>
                    <p>{intl.formatMessage({ id: 'pcHome.cpdLine1' })}</p>
                    <p>
                      <CaretRightOutlined />
                      &nbsp;
                      {intl.formatMessage({ id: 'pcHome.cpdLine2' })}
                    </p>
                    <ul style={{ paddingLeft: '60px' }}>
                      <li style={{ listStyle: 'disc' }}>
                        {intl.formatMessage({ id: 'pcHome.cpdLine3' })}
                      </li>
                      <li style={{ listStyle: 'disc' }}>
                        {intl.formatMessage({ id: 'pcHome.cpdLine4' })}
                      </li>
                    </ul>
                    <p>
                      <CaretRightOutlined />
                      &nbsp;
                      {intl.formatMessage({ id: 'pcHome.cpdLine5' })}
                    </p>
                    <p>
                      <CaretRightOutlined />
                      &nbsp;
                      {intl.formatMessage({ id: 'pcHome.cpdLine6' })}
                    </p>
                    <p>
                      <CaretRightOutlined />
                      &nbsp;
                      {intl.formatMessage({ id: 'pcHome.cpdLine81' })}
                      <a
                        href={
                          localStorage.umi_locale == 'en-US'
                            ? 'https://workflow.deloitte.com.cn/en/workinput/cpds'
                            : 'https://workflow.deloitte.com.cn/zh/workinput/cpds'
                        }
                        target="blank"
                      >
                        {intl.formatMessage({ id: 'pcHome.cpdLine82' })}
                      </a>
                      <span style={{ fontWeight: 'bold' }}>
                        {intl.formatMessage({ id: 'pcHome.cpdExplain' })}
                      </span>
                      {intl.formatMessage({ id: 'pcHome.cpdLine83' })}
                    </p>
                    <p>
                      <CaretRightOutlined />
                      &nbsp;
                      {intl.formatMessage({ id: 'pcHome.cpdLine71' })}
                      <a
                        href={
                          localStorage.umi_locale == 'en-US'
                            ? 'https://inet.deloitte.com.cn/DI/Pages/policies.aspx'
                            : 'http://inet.deloitte.com.cn/DI/Pages/policies-cn.aspx'
                        }
                        target="blank"
                      >
                        {intl.formatMessage({ id: 'pcHome.cpdLine72' })}
                      </a>
                      {intl.formatMessage({ id: 'pcHome.cpdLine73' })}
                    </p>

                    <p>
                      {intl.formatMessage({ id: 'pcHome.cpdLine9' })}
                      <a href="mailto:cngdclearningd@deloitte.com.cn"> CN L&D, CPD Communication</a>
                      {intl.formatMessage({ id: 'pcHome.juhao' })}
                    </p>
                  </div>,
                );
                setIsModalVisible(true);
              }}
            >
              <img src={homeIocn2} alt="" />
              {intl.formatMessage({ id: 'pcHome.toolbarItem1' })}
            </div>
model2：
<div
              className={styles.toollink}
              onClick={() => {
                setModalTitle(intl.formatMessage({ id: 'pcHome.pdsLine1' }));
                setModalContent(
                  <div>
                    <p> {intl.formatMessage({ id: 'pcHome.pdsLine2' })}</p>
                    <p> {intl.formatMessage({ id: 'pcHome.pdsLine3' })}</p>
                    <p>
                      {intl.formatMessage({ id: 'pcHome.pdsLine41' })}
                      <a
                        href={
                          localStorage.umi_locale == 'en-US'
                            ? 'https://inet.deloitte.com.cn/DI/Pages/pdsn.aspx'
                            : 'https://inet.deloitte.com.cn/DI/Pages/pdsn-cn.aspx'
                        }
                        target="blank"
                      >
                        {intl.formatMessage({ id: 'pcHome.pdsLine42' })}
                      </a>
                      {intl.formatMessage({ id: 'pcHome.pdsLine43' })}
                      {intl.formatMessage({ id: 'pcHome.juhao' })}
                    </p>
                    <p>
                      {intl.formatMessage({ id: 'pcHome.pdsLine5' })}
                      <a href="mailto:cnldpds@deloitte.com.cn"> CN L&D, PDS Communication</a>
                      {intl.formatMessage({ id: 'pcHome.juhao' })}
                    </p>
                  </div>,
                );
                setIsModalVisible(true);
              }}
            >
              <img src={homeIocn3} alt="" />
              {intl.formatMessage({ id: 'pcHome.toolbarItem2' })}
            </div>

Model 代码：
 <Modal
        title={modalTitle}
        visible={isModalVisible}
        footer={null}
        onOk={() => {
          setIsModalVisible(false);
        }}
        onCancel={() => {
          setIsModalVisible(false);
        }}
      >
        <div
          style={{
            fontSize: '16px',
            minHeight: '150px',
            padding: '20px',
            display: 'flex',
            justifyContent: 'center',
          }}
          className={styles.modalContent}
        >
          {modalContent} ************对应的 setModalContent的 hoosk 
        </div>
      </Modal>

这样的好处是 少声明一些hooks 复用了setModalContent hook

源代码：
import React, { useState, useEffect } from 'react';
import { useIntl, Link } from 'umi';
import { Tooltip, Modal } from 'antd';
import { PlayCircleOutlined, PauseCircleOutlined, CaretRightOutlined } from '@ant-design/icons';
import Header from '@/components/UserHeader';
import styles from './index.less';
import UserBanner from '@/components/UserBanner';
import { getPageQuery } from '@/utils/utils';
import { GetDisplayList } from '@/services/displaySetting';

import menuIcon from '@/assets/pcUser/home/menu-icon.png';
import homeIocn1 from '@/assets/pcUser/home/home-icon1.png';
import homeIocn2 from '@/assets/pcUser/home/home-icon2.png';
import homeIocn3 from '@/assets/pcUser/home/home-icon3.png';
import homeIocn4 from '@/assets/pcUser/home/home-icon4.png';
import homeIocn5 from '@/assets/pcUser/home/home-icon5.png';
import newIcon from '@/assets/pcUser/new.png';

export default (props) => {
  const intl = useIntl();
  const [displayList, setDisPlayList] = useState([]);
  const [modalTitle, setModalTitle] = useState();
  const [modalContent, setModalContent] = useState();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [playing, setPlaying] = useState(false);
  const [firstPlay, setFirstPlay] = useState(true);

  const getDisplayList = () => {
    let preview = getPageQuery().preview == 'true' ? true : false;
    GetDisplayList({ PageType: '1001', IsPublished: !preview }).then((res) => {
      if (res && Array.isArray(res)) {
        setDisPlayList(res || []);
      }
    });
  };

  useEffect(() => {
    getDisplayList();
  }, []);

  const oprateVideo = () => {
    const video = document.getElementById('Video');
    setFirstPlay(false);
    if (video.paused) {
      video.play();
      setPlaying(true);
    } else {
      setPlaying(false);
      video.pause();
    }
  };

  const oprateVideo2 = () => {
    const video = document.getElementById('Video');
    setFirstPlay(false);
    if (video.paused) {
      setPlaying(true);
    } else {
      setPlaying(false);
    }
  };

  return (
    <div className={styles.pageContainer}>
      <Header isActive={false} tabOr={true} />
      <UserBanner></UserBanner>
      <div justify="space-between" className={styles.pageContent}>
        <div span={16} className={styles.pageLeft}>
          {!!displayList.length
            ? displayList.map((item, index) => {
                switch (Number(item.FunctionType)) {
                  case 1001: // introduction
                    return (
                      <div
                        key={item.Id}
                        className={`${styles.courseIntro} bf-container-show`}
                        dangerouslySetInnerHTML={{
                          __html:
                            item.DisplayItemDetailList[0] &&
                            item.DisplayItemDetailList[0].Introduction,
                        }}
                      ></div>
                    );
                  case 1002: // video
                    return (
                      <div className={styles.videoBox} key={item.Id}>
                        <video
                          id="Video"
                          src={
                            item.DisplayItemDetailList[0] && item.DisplayItemDetailList[0].VideoLink
                          }
                          controls
                          onClick={oprateVideo2}
                        ></video>
                        {firstPlay ? (
                          <PlayCircleOutlined onClick={oprateVideo} className={styles.playIcon} />
                        ) : null}
                        {playing ? (
                          <PauseCircleOutlined onClick={oprateVideo} className={styles.pauseIcon} />
                        ) : (
                          <PlayCircleOutlined onClick={oprateVideo} className={styles.playIcon} />
                        )}
                      </div>
                    );
                  case 1003: // 微课&新闻
                    const newsItemlistClass = `${styles.hasChilds}${item.Quantity}`;
                    return (
                      <div key={item.Id} className={`${styles.newsItemlist} ${newsItemlistClass}`}>
                        {item.DisplayItemDetailList.map((item2, index2) => {
                          let newsItemClass = styles.newsItemMini;
                          if (item.Quantity === 1) {
                            newsItemClass = styles.newsItemLarge;
                          }
                          if (item.Quantity === 2) {
                            newsItemClass =
                              index2 == 0 ? styles.newsItemMini : styles.newsItemMiddle;
                          }
                          if (item.Quantity === 3) {
                            newsItemClass = styles.newsItemMini;
                          }
                          return (
                            <Link
                              to={{
                                pathname:
                                  item2.ItemType == 1001
                                    ? '/userInterface/newsDetails'
                                    : '/userInterface/microLearningDetail', // 1001:新闻 1002：微课
                                search: `id=${item2.ItemId}`,
                              }}
                              key={item2.Id}
                              className={`${styles.newsItem} ${newsItemClass}`}
                            >
                              {item2.IsNewIndicator ? (
                                <img src={newIcon} className={styles.newIcon} alt="" />
                              ) : null}

                              {item2.Image ? (
                                <img
                                  src={`${ATTACHMENT_URL}${item2.Image}`}
                                  className={styles.newsItemImg}
                                ></img>
                              ) : null}

                              <div className={styles.newsItemContent}>
                                <Tooltip placement="topLeft" title={item2.Title}>
                                  <p className={styles.newsItemTitle}>
                                    {/* 1001:新闻 1002:微课 其他:'' */}
                                    {item2.ItemType == 1001
                                      ? intl.formatMessage({ id: 'global news' })
                                      : item2.ItemType == 1002
                                      ? intl.formatMessage({ id: 'global Micro Learning' })
                                      : ''}
                                  </p>
                                </Tooltip>

                                <Tooltip placement="topLeft" title={item2.Title}>
                                  <p className={styles.newsItemSubTitle}>{item2.Title} </p>
                                </Tooltip>
                                <Tooltip placement="topLeft" title={item2.Summary}>
                                  <p
                                    className={styles.newsItemIntro}
                                    dangerouslySetInnerHTML={{
                                      __html: item2.Summary,
                                    }}
                                  ></p>
                                </Tooltip>
                              </div>
                            </Link>
                          );
                        })}
                      </div>
                    );
                  default:
                }
              })
            : ''}
        </div>

        <div span={7} offset={1} className={styles.pageRight}>
          <div className={styles.toolBox}>
            <div className={styles.toolBoxTitle}>
              <img src={menuIcon} alt="" />
              {intl.formatMessage({ id: 'pcHome.toolbar' })}
            </div>
            <Link
              to={{
                pathname: '/userInterface/allLearning',
              }}
              className={styles.toollink}
            >
              <img src={homeIocn1} alt="" />
              {intl.formatMessage({ id: 'pcHome.myLearning' })}
            </Link>
            <div
              className={styles.toollink}
              onClick={() => {
                setModalTitle(intl.formatMessage({ id: 'pcHome.toolbarItem1' }));
                setModalContent(
                  <div>
                    <p>{intl.formatMessage({ id: 'pcHome.cpdLine1' })}</p>
                    <p>
                      <CaretRightOutlined />
                      &nbsp;
                      {intl.formatMessage({ id: 'pcHome.cpdLine2' })}
                    </p>
                    <ul style={{ paddingLeft: '60px' }}>
                      <li style={{ listStyle: 'disc' }}>
                        {intl.formatMessage({ id: 'pcHome.cpdLine3' })}
                      </li>
                      <li style={{ listStyle: 'disc' }}>
                        {intl.formatMessage({ id: 'pcHome.cpdLine4' })}
                      </li>
                    </ul>
                    <p>
                      <CaretRightOutlined />
                      &nbsp;
                      {intl.formatMessage({ id: 'pcHome.cpdLine5' })}
                    </p>
                    <p>
                      <CaretRightOutlined />
                      &nbsp;
                      {intl.formatMessage({ id: 'pcHome.cpdLine6' })}
                    </p>
                    <p>
                      <CaretRightOutlined />
                      &nbsp;
                      {intl.formatMessage({ id: 'pcHome.cpdLine81' })}
                      <a
                        href={
                          localStorage.umi_locale == 'en-US'
                            ? 'https://workflow.deloitte.com.cn/en/workinput/cpds'
                            : 'https://workflow.deloitte.com.cn/zh/workinput/cpds'
                        }
                        target="blank"
                      >
                        {intl.formatMessage({ id: 'pcHome.cpdLine82' })}
                      </a>
                      <span style={{ fontWeight: 'bold' }}>
                        {intl.formatMessage({ id: 'pcHome.cpdExplain' })}
                      </span>
                      {intl.formatMessage({ id: 'pcHome.cpdLine83' })}
                    </p>
                    <p>
                      <CaretRightOutlined />
                      &nbsp;
                      {intl.formatMessage({ id: 'pcHome.cpdLine71' })}
                      <a
                        href={
                          localStorage.umi_locale == 'en-US'
                            ? 'https://inet.deloitte.com.cn/DI/Pages/policies.aspx'
                            : 'http://inet.deloitte.com.cn/DI/Pages/policies-cn.aspx'
                        }
                        target="blank"
                      >
                        {intl.formatMessage({ id: 'pcHome.cpdLine72' })}
                      </a>
                      {intl.formatMessage({ id: 'pcHome.cpdLine73' })}
                    </p>

                    <p>
                      {intl.formatMessage({ id: 'pcHome.cpdLine9' })}
                      <a href="mailto:cngdclearningd@deloitte.com.cn"> CN L&D, CPD Communication</a>
                      {intl.formatMessage({ id: 'pcHome.juhao' })}
                    </p>
                  </div>,
                );
                setIsModalVisible(true);
              }}
            >
              <img src={homeIocn2} alt="" />
              {intl.formatMessage({ id: 'pcHome.toolbarItem1' })}
            </div>
            <div
              className={styles.toollink}
              onClick={() => {
                setModalTitle(intl.formatMessage({ id: 'pcHome.pdsLine1' }));
                setModalContent(
                  <div>
                    <p> {intl.formatMessage({ id: 'pcHome.pdsLine2' })}</p>
                    <p> {intl.formatMessage({ id: 'pcHome.pdsLine3' })}</p>
                    <p>
                      {intl.formatMessage({ id: 'pcHome.pdsLine41' })}
                      <a
                        href={
                          localStorage.umi_locale == 'en-US'
                            ? 'https://inet.deloitte.com.cn/DI/Pages/pdsn.aspx'
                            : 'https://inet.deloitte.com.cn/DI/Pages/pdsn-cn.aspx'
                        }
                        target="blank"
                      >
                        {intl.formatMessage({ id: 'pcHome.pdsLine42' })}
                      </a>
                      {intl.formatMessage({ id: 'pcHome.pdsLine43' })}
                      {intl.formatMessage({ id: 'pcHome.juhao' })}
                    </p>
                    <p>
                      {intl.formatMessage({ id: 'pcHome.pdsLine5' })}
                      <a href="mailto:cnldpds@deloitte.com.cn"> CN L&D, PDS Communication</a>
                      {intl.formatMessage({ id: 'pcHome.juhao' })}
                    </p>
                  </div>,
                );
                setIsModalVisible(true);
              }}
            >
              <img src={homeIocn3} alt="" />
              {intl.formatMessage({ id: 'pcHome.toolbarItem2' })}
            </div>
            <div className={styles.toollink}>
              <img src={homeIocn4} alt="" />
              <a target="blank" href="https://prezi.com/i/embed/DvKatUn524oFo4DWOnGp">
                {intl.formatMessage({ id: 'pcHome.toolbarItem3' })}
              </a>
            </div>
            <div className={`${styles.toollink} ${styles.download}`}>
              <img src={homeIocn5} alt="" />
              <a
                target="blank"
                href={
                  localStorage.umi_locale == 'en-US'
                    ? 'https://inet.deloitte.com.cn/DI/Lists/News/DispForm_en.aspx?ID=19'
                    : 'https://inet.deloitte.com.cn/DI/Lists/News/DispForm_cn.aspx?ID=19'
                }
              >
                {intl.formatMessage({ id: 'pcHome.downloadApp' })}
              </a>
            </div>
          </div>
        </div>
      </div>
      <Modal
        title={modalTitle}
        visible={isModalVisible}
        footer={null}
        onOk={() => {
          setIsModalVisible(false);
        }}
        onCancel={() => {
          setIsModalVisible(false);
        }}
      >
        <div
          style={{
            fontSize: '16px',
            minHeight: '150px',
            padding: '20px',
            display: 'flex',
            justifyContent: 'center',
          }}
          className={styles.modalContent}
        >
          {modalContent} ************对应的 setModalContent的 hoosk 
        </div>
      </Modal>
    </div>
  );
};