表格和div组成，x

lookPlotDetail.tsxplotInquiry.tsximport React from "react";const PlotInfoThree: React.FC = () => { return (

PlotInfoThree;

);};export default PlotInfoThree;用hook写一个tab选项卡const riskAssessment: React.FC<{ plotCode: string, surveyType: string }> = ({ plotCode, surveyType }) => {  const [active, setActive] = useState(1);  const selectAction = (num: number) => {    setActive(num);  };  const showComponent = () => {    if (active === 1) {      return;    }    if (active === 2) {      return;    }  };  return (

selectAction(1)}>地块详情

selectAction(2)}>专家评审信息

{ showComponent(); }

);};分页器是否显示{dataSource && dataSource.length ?

`共${total}条`} pageSizeOptions={PAGESIZE_OPTIONS} showSizeChanger showQuickJumper className="reset-ant-pagination" onChange={onPageChange} onShowSizeChange={pageSizeChange} />

: null        } (!isImge ? window.open(dataSource[key][0].fileUrl) : null)} >{formatData(dataSource[key][0].fileName)} (!isImge ? openFile(dataSource[key][0].fileUrl) : showImg(dataSource[key][0].fileUrl))} className="iconfont paicon-booking">const viewImg = (url: string) => {    setIsVisiable(true);    setImagePath(url);    console.log("aaaaa", url);  };  const handLookPic = (item: any) => {    viewImg(item.fullUrl);  };const renderReport = (dataSource: any, key: string, isImge?: boolean) => {    return

{        dataSource && dataSource[key] && dataSource[key][0] ?          <>            {/* (!isImge ? window.open(dataSource[key][0].fileUrl) : null)} >{formatData(dataSource[key][0].fileName)}*/}            {/* (!isImge ? openFile(dataSource[key][0].url) : showImg(dataSource[key][0].url))} className="iconfont paicon-booking">*/} handLookPic(dataSource[key][0])}>{dataSource[key][0].fileName}: <>--      }

;  };{/* (!isImge ? window.open(dataSource[key][0].fileUrl) : null)} >{formatData(dataSource[key][0].fileName)}*/}            {/* (!isImge ? openFile(dataSource[key][0].url) : showImg(dataSource[key][0].url))} className="iconfont paicon-booking">*/}businessId: nullcurrentStage: nullentryTime: nullfileName: "HhdsBl-JOXyAXvnFAAAt4eVyS9g01.docx"fileType: nullfullUrl: "http://30.23.9.160:50302/fc/download?id=group6/M00/02/31/HhdsBl-JOXyAXvnFAAAt4eVyS9g01.docx&tkUserToken=321312FastDFSZHIHUIHUANBAO1234567890"isDelete: nullisSubmit: nullplotCode: nullresultContent: nullupdateTime: nullurl: "group6/M00/02/31/HhdsBl-JOXyAXvnFAAAt4eVyS9g01.docx"activitiesList.activitiesList_wrapper__WzKWw .activitiesList_moreBox__3EF1z {    width: 100%;    display: flex;    flex-flow: row wrap;    padding-left: 0.2rem;    height: ca;    height: calc(100% - 0.2rem);    padding-top: 0.1rem;}  鼠标放上去hover的效果  &:hover{        background: #427AFF ;        color: #FFFFFF;    }areaListInfomation在同一个公共的组件中,把这两个组件都在公共组件中调用,他们的id相同就会产生冲突。qualityAnalysis.tsx

{item.name}

{`${item.value ? item.value : "--"}km2`}

{item.percent ? `${item.percent}%` : ""}

// 鼠标放上在柱状图的显示,该当前的数值.echarts {      height: 1.69rem;      width: 6.75rem;      :global(.land-category-tips) {        background: #fff;        box-shadow: 0 0 0.05rem 0 rgba(0, 0, 0, 0.25);        border-radius: 0.01rem;        padding: 0.1rem 0.2rem;        > div {          color: #333;          font-size: 0.16rem;          > span:nth-child(1) {            font-size: 0.14rem;          }          > span:nth-child(2) {            color: #427aff;            font-size: 0.14rem;          }        }      }    }鼠标放上去显示,当前柱状图的数据。一个柱子他的颜色是数组[0]导出的文件export default D:\Users\EX-lUOSHAOHUA001\Desktop\40.SEMS-土壤环境综合管理系统\3、设计文档\v1.2\管理端\20201016污染地块管理概览、清单名录、活动评审areaListInfomation axisLabel: {          fontSize: 0.14 * size,          color: "#666",          align: "center",          fontWeight: "300",          interval: 0,          rotate: -30,          margin: 25,          // padding: ["0.1rem", "0rem", "0rem", "0rem"],          // padding: [0.09 * size, 0.15 * size],        },        // data: dataSource.map((item: any) => item.soilTypeName),        // data: getAxisValue()        data: list.map((item: any) => item.regionName),        // data: ["罗湖区", "福田区", "南山区", "宝安区", "光明区", "平山区", "龙华区", "龙岗区", "大鹏新区", "盐田区", "深汕合作区"]      },Interface IProps { 单纯错了,interface才是  params: any,}菜单列表import React, { memo, useEffect, useState } from "react";import Title from "components/BaseTitle/baseTitle";import aStyle from "./activitiesList.module.less";import ApiFetch from "utils/apiFetch";import { contaminatedLandManage } from "utils/apiGroup";import Nodata from "components/Nodata/Nodata";interface Iprops {  params: any}interface IList {  name: string,  key: string,  code: number}const ARR_LIST: IList[] = [  { name: "土壤污染状况调查名录", key: "soilPollutionStatus", code: 0 },  { name: "移出调查名录", key: "removeSurveyList", code: 1 },  { name: "在风险评估名录", key: "inTheRiskAssessmentDirectory", code: 2 },  { name: "移出风险评估名录", key: "removedFromtheRiskAssessmentList", code: 3 },  { name: "在风险管控与修复名录", key: "inTheRiskManagementAndRepairDirectory", code: 4 },  { name: "移出风险管控与修复名录", key: "removedFromTheListOfRiskManagementAndRestoration", code: 5 },];const ActivitiesList: React.FC= ({ params }) => {  const [list, setList] = useState([]);  useEffect (() => {    BlockList();  }, [JSON.stringify(params)]);  const BlockList = async () => {    const par = {      // endTime: params.endTime,      // startTime: params.startTime,      regionCodes: params.regionCodes    };    const res: any = await ApiFetch.post(contaminatedLandManage.riskManageMentList, par);    if (res._success) {      if (res.data) {        const tempList = ARR_LIST.map((item: IList) => {          return {            name: item.name,            value: res.data[item.key]          };        });        console.log(tempList);        setList(tempList);      } else {        setList([]);      }    } else {      setList([]);    }  };  return (

{ list.length ? (list || []).map((item: {code: number, name: string, value: number}) => { return

{item.name}

{item.value}

; }) : }

); }; export default memo(ActivitiesList); 不能将类型“Boolean”分配给类型“boolean | SpinProps | undefined”。 不能将类型“Boolean”分配给类型“true”。 const [popupLoading, setPopupLoading] = useState(false); 正确的写法是 const [popupLoading, setPopupLoading] = useState(false); Boolean不能大写,正确的写法是boolean dele(1,record)}>删除 箭头函数是传入两个参数,需要传入参数的时候,可以用箭头函数 // 专家列表 const getExpertSelect = async (params: {}): Promise => { const res: IResponse = await ApiFetch.post(plotManageApi.expertSelect, params); return res._success && res.data ? res.data : []; }; const getData = async () => { setIsLoading(true); let params = { fieldIdList: fields, searchValue: getName }; const res = await Service.getExpertSelect(params); setDataSours(res); setIsLoading(false); }; changeParam(vl, "detaileCode")} allLabel="地块详查结果(全部)" />