我的美丽实习日记day17

目录

• 本日简短总结
• 遇到的困难和怎么解决

本日简短总结

• 完成了需求中的

  • 点击提示面板跳转带参

  • 点击图标跳转带参

  • 多选警告信息

• 感想

  • 真的好难，感觉就是fly bitch
    

遇到的困难和怎么解决

• 我真的不想动这个老项目中的逻辑了。
  • 在点击图标跳转带参这里我路由跳转到相应页面之后直接模拟点击事件跳转了。

switch(this.props.stores.MenuModel.getMenuParams(this.props.match.url)?.record?.type) {
      case 'mysql':
        setTimeout(() => {
          document
          .getElementsByClassName('component-content-center-card-dataApplication')[0]
          ?.getElementsByClassName('normal')[1]
          ?.click();
        }, 0)
        break;
      case 'hbase':
        setTimeout(() => {
          document
          .getElementsByClassName('component-content-center-card-dataSave')[0]
          ?.getElementsByClassName('normal')[0]
          ?.click();
        }, 0)
        break;
      case 'nginx':
        setTimeout(() => {
          document
          .getElementsByClassName('component-content-center-card')[0]
          ?.getElementsByClassName('normal')[3]
          ?.click();
        }, 0)
        break;
    }

• setState后，子组件参数死活不变
  • 其实是因为我用的map输出组件，而map没有设置key
  • 导致即使参数变化，key没有变化，diff算法也认为是同一个节点而没有进行更新
  • 后来对tabs加了个key就好了

const tabs = [
      {
        title: "拨测结果",
        key: 1,
        content: (
          <DialResult
            productList={productList}
            projectId={projectId}
            success={success}
            startTime={moment(
              new Date().getTime() - 24 * 60 * 60 * 1000
            ).format("YYYY-MM-DD hh:mm:ss")}
            endTime={moment(new Date()).format("YYYY-MM-DD hh:mm:ss")}
            routeParams={routeParams}
            key={routeParams ? 'resultWithRouteParams' : 'resultWithOutRouteParams' }
          />
        ),
      },
      {
        title: "拨测任务",
        key: 2,
        content: <DialTask 
          productList={productList} 
          projectId={projectId} 
          routeParams={routeParams}
          key={routeParams ? 'taskWithRouteParams' : 'taskWithOutRouteParams' }
        />,
      }
]