一、锚点

(一)、css伪类实现小圆点

 .digUls {
        ul {
          // padding-left: 30px;
          a {
            // text-decoration: none; //去掉下划线
            // color: #000; //去掉点击后的颜色变化
            li {
              font-size: 16px;
              margin-bottom: 12px;
            }
            &::before {
              content: '';
              display: inline-block;
              width: 5px;
              height: 5px;
              background: #323332;
              border-radius: 50%;
              margin-right: 20px;
            }
          }
        }
      }

(二)、react页面布局实现锚点

1.对后端返回的数据进行处理

(1)、页面效果图

(2)、增+改，后端返回的数据进行处理

1. 情景描述：对data的des字段进行判断，以(***)为标志进行截取，若存在，则split()字符串进行截取为数组。
2. 实现思路：添加路由的url,在数组对象查找满足条件的某个对象，以（xx.id == xx.id）为条件进行查找，若存在，则
   添加一个urlz字段，如：url: urlData.find((urlItem) => urlItem.id === item.id)?.url,
3. 核心代码：

*getSolutionsThreeList({ payload }, { call, put }) {
      const response = yield call(getSolutionsThreeList, payload);
      console.log('response getSolutionsThreeList>>>', response);
      if (response.code === 200) {
        const resDataLists = response.data;
        const myModifyData = resDataLists.map((item) => {
          console.log(111, item.des.indexOf('***'));
          if (item.des.indexOf('***') !== -1) {
            return {
              ...item,
              des: item.des.split('***'),
            };
          } else {
            return {
              ...item,
            };
          }
        });
        const urlData = [
          {
            id: 1,
            url: '/digitalTransportation',
          },
          {
            id: 2,
            url: '/digitalAgriculture',
          },
          {
            id: 3,
            url: '/digitalPipeNetwork',
          },
          {
            id: 4,
            url: '/digitalBattlefield',
          },
          {
            id: 5,
            url: '/onboardEdge',
          },
          {
            id: 6,
            url: '/UAVEdge',
          },
          {
            id: 7,
            url: '/groundEdge',
          },
        ];
        const myAddData = myModifyData.map((item, index) => {
          return {
            ...item,
            url: urlData.find((urlItem) => urlItem.id === item.id)?.url,
          };
        });
        console.log('response resDataLists>>>', myAddData);

        yield put({
          type: 'setState',
          payload: { solutionsThreeList: myAddData },
        });
      } else {
        notification.warning({
          message: '后端接口没有返回数据或数据不存在',
          description: response.msg,
        });
      }
    },

(三)、增+改，前端的页面布局进行处理

1.实现思路：jsx写法，通过三元运算符进行页面布局。

根据isArr()方法返回的boolean值进行，进行控制返回的html页面结构。

 const isArr = (data) => {
    if (typeof data === 'string') {
      return false;
    } else {
      return true;
    }
  };

2.核心代码，写如下：

在react页面渲染的类组件的render(),或者函数组件的return()

 <div className={styles.home_box}>
      {/* 星载边缘计算 */}
      {solutionsThreeList.map((item, index) => {
        return (
          <div
            className={styles.digTransport}
            key={index}
            onClick={() => {
              history.push(item.url);
            }}
          >
            <img src={item.img || solution01} alt="一张图" />
            <div className={styles.digContent}>
              <div className={styles.digTitle}>
                <div className={styles.blueTitle}>
                  {item.title || '星载边缘计算'}
                </div>
                <div className={styles.greyLine}></div>
              </div>
              <div className={styles.digUls}>
                {isArr(item.des) ? (
                  <Anchor onChange={onAnchorChange}>
                    <div className={styles.digUlItem}>
                      {item.des.map((littleItem, littleIndex) => {
                        return (
                          <Link
                            key={littleIndex}
                            href={`#${littleItem}`}
                            title={littleItem}
                          ></Link>
                        );
                      })}
                    </div>
                  </Anchor>
                ) : (
                  <p>{item.des}</p>
                )}

注意：根据isArr()方法返回的boolean值进行，进行控制返回的html页面结构。