不想当小白 2022-01-07 16:32 采纳率: 77.8%
浏览 112
已结题

ie9 中 react 使用 map 循环渲染列表,return 标签时报错

问题遇到的现象和发生背景

浏览器:ie11浏览器 -> 打开控制台 -> 仿真tab -> 文档模式调为 ie9
前端框架:umi+typescript
工程配置信息:

img

img

问题相关代码,请勿粘贴截图
import React, { useEffect, useState } from 'react';
import styles from '@/static/css/index/index.less';

interface people {
  name: string;
  phone: string;
}

type Props = {
  type: string;
  info: Array<people>;
}

const Consultant : React.FC<Props> = ({type, info}) => {
  let listArr = info.map(function (item, index){
    return (
      <span>666</span>
    );
  });
  return (
    <div>
      <div className={styles.consultant}>
        <span className="iconfont icon-icon_icon-5"></span>
        <span className={styles.consultant_title}>{type}</span>
        <span className={styles.consultant_info}>
          {listArr}
        </span>
      </div>
    </div>
  );
}

export default Consultant;

运行结果及报错内容

页面空白

img


[图片]

我的解答思路和尝试过的方法

1、引入相关的 polyfill 依赖包(无效)
2、map 函数中 return 字符串或者数字,页面都可以正常显示,只有返回 html 标签会报错
3、return 标签的报错只在 ie9 中出现,ie10 和 ie11 均正常显示

我想要达到的结果

可以 return 标签,即 ie9 中使用 map 可以将列表循环渲染为想要的 dom 节点

  • 写回答

2条回答 默认 最新

  • 0 errors 2022-01-07 17:21
    关注

    这样写试试:return (666);

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    1人已打赏
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 1月7日
  • 已采纳回答 1月7日
  • 创建了问题 1月7日

悬赏问题

  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测