Reactjs 将状态分配给表td_Reactjs_Typescript

Reactjs 将状态分配给表td

reactjs typescript

Reactjs 将状态分配给表td,reactjs,typescript,Reactjs,Typescript,我的目标是创建一个具有5x5网格的子组件，并根据其状态为网格分配数字，f.e（4,5）将显示在第4列的第5行，并将多个数字渲染到单元格中我不确定如何在react中实现，因为对于jQuery，我将以td的ID为目标，并附加到innerhtml中如果遇到三元运算符，我可以映射数组并创建基于html的数组，但是如果使用5x5网格，这将很快失控并变得混乱我的html结构如下 <table className={styles.HeatMapTable}> <thead

我的目标是创建一个具有5x5网格的子组件，并根据其状态为网格分配数字，f.e（4,5）将显示在第4列的第5行，并将多个数字渲染到单元格中

我不确定如何在react中实现，因为对于jQuery，我将以td的ID为目标，并附加到innerhtml中

如果遇到三元运算符，我可以映射数组并创建基于html的数组，但是如果使用5x5网格，这将很快失控并变得混乱

我的html结构如下

<table className={styles.HeatMapTable}>
      <thead />
      <tbody>
        <tr>
          <td className={styles.HeatMapYMarginLegend}>5</td>
          <td className={styles.HeatMapAmberCell} />
          <td className={styles.HeatMapAmberCell} />
          <td className={styles.HeatMapRedCell} />
          <td className={styles.HeatMapRedCell} />
          <td className={styles.HeatMapRedCell} />
        </tr>
        <tr>
          <td className={styles.HeatMapYMarginLegend}>4</td>
          <td className={styles.HeatMapGreenCell} />
          <td className={styles.HeatMapAmberCell} />
          <td className={styles.HeatMapRedCell} />
          <td className={styles.HeatMapRedCell} />
          <td className={styles.HeatMapRedCell} />
        </tr>
        <tr>
          <td className={styles.HeatMapYMarginLegend}>3</td>
          <td className={styles.HeatMapGreenCell} />
          <td className={styles.HeatMapAmberCell} />
          <td className={styles.HeatMapAmberCell} />
          <td className={styles.HeatMapRedCell} />
          <td className={styles.HeatMapRedCell} />
        </tr>
        <tr>
          <td className={styles.HeatMapYMarginLegend}>2</td>
          <td className={styles.HeatMapGreenCell} />
          <td className={styles.HeatMapGreenCell} />
          <td className={styles.HeatMapAmberCell} />
          <td className={styles.HeatMapAmberCell} />
          <td className={styles.HeatMapRedCell} />
        </tr>
        <tr>
          <td className={styles.HeatMapYMarginLegend}>1</td>
          <td className={styles.HeatMapGreenCell} />
          <td className={styles.HeatMapGreenCell} />
          <td className={styles.HeatMapGreenCell} />
          <td className={styles.HeatMapGreenCell} />
          <td className={styles.HeatMapAmberCell} />
        </tr>
        <tr>
          <td />
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>


5.
4.
3.
2.
1.
1.
2.
3.
4.
5.

如有任何建议，将不胜感激

编辑；父组件

import * as React from "react";
import * as ReactDom from "react-dom";
import styles from "./Reporting.module.scss";
import { RiskReportProps } from "./RiskReportProps";
import { RiskReportState } from "./RiskReportState";
import { escape } from "@microsoft/sp-lodash-subset";
import {
  SPHttpClient,
  SPHttpClientResponse,
  ISPHttpClientOptions
} from "@microsoft/sp-http";
import { RiskReportHeatMap } from "./RiskReportHeatMap";
import { RiskReportSummary } from "./RiskReportSummary";

export class RiskReport extends React.Component<
  RiskReportProps,
  RiskReportState
> {
  public static defaultProps: Partial<RiskReportProps> = {};

  constructor(props) {
    super(props);

    this.state = {
      riskData: []
    };
  }

  public componentDidMount() {
    const url: string =
      this.props.context.pageContext.site.absoluteUrl +
      "/_api/web/lists/getbytitle('Risks')/items?$expand=RiskOwner&$select=Id,RiskID,RiskTheme,Risk,ResidualOveralLikelihood,ResidualSafety,ResidualSecurity," +
      "ResidualEnviroment,ResidualFinance,ResidualOperational,ResidualLegal,ResidualReputation,RiskVelocity,RiskOwner/Title";
    this.props.context.spHttpClient
      .get(url, SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        response.json().then(data => {
          console.log(data.value);
          let riskTableData = [];
          data.value.forEach(c => {
            let risk = {
              riskID: "",
              riskTheme: "",
              risk: "",
              riskOwner: "",
              riskLikelihood: 0,
              riskConsequence: 0,
              riskVelocity: ""
            };
            risk.riskID = c.RiskID;
            risk.riskLikelihood = c.ResidualOveralLikelihood;
            risk.riskConsequence = Math.max(
              c.ResidualSafety,
              c.ResidualSecurity,
              c.ResidualEnviroment,
              c.ResidualFinance,
              c.ResidualOperational,
              c.ResidualLegal,
              c.ResidualReputation
            );
            risk.riskVelocity = c.RiskVelocity;
            risk.riskTheme = c.RiskTheme;
            risk.risk = c.Risk;
            risk.riskOwner = c.RiskOwner;
            riskTableData.push(risk);
          });
          console.log(riskTableData);
          this.setState(prevState => ({
            riskData: riskTableData
          }));
        });
      });
  }

  public render(): React.ReactElement<RiskReportProps> {
    return (
      <div className="riskReport">
        Reporting
        <RiskReportHeatMap riskData={this.state.riskData} />
        <RiskReportSummary riskData={this.state.riskData} />
      </div>
    );
  }
}

import*as React from“React”；
从“react dom”导入*作为react dom；
从“/Reporting.module.scss”导入样式；
从“/RiskReportProps”导入{RiskReportProps}；
从“/RiskReportState”导入{RiskReportState}；
从“@microsoft/sp lodash subset”导入{escape}”；
进口{
SPHttpClient，
SPHttpClientResponse，
ISPHttpClientOptions
}来自“@microsoft/sp http”；
从“/RiskReportHeatMap”导入{RiskReportHeatMap}；
从“/RiskReportSummary”导入{RiskReportSummary}；
导出类RiskReport扩展React.Component<
风险报告道具，
风险报告国
> {
公共静态defaultProps:Partial={}；
建造师（道具）{
超级（道具）；
此.state={
风险数据：[]
};
}
公共组件didmount（）{
常量url:string=
this.props.context.pageContext.site.absoluteUrl+
“/_api/web/lists/getbytitle（‘风险’）/items？$expand=RiskOwner&$select=Id、RiskID、RiskTheme、Risk、ResidualLoveRallIkelihood、ResidualSafety、ResidualSecurity，”+
“剩余环境、剩余金融、剩余合理、剩余合法、剩余置换、风险速度、风险所有者/所有权”；
this.props.context.spHttpClient
.get（url，SPHttpClient.configurations.v1）
.然后（（响应：SPHttpClientResponse）=>{
response.json（）.then（数据=>{
console.log（data.value）；
设riskTableData=[]；
data.value.forEach（c=>{
让风险={
风险ID:“”，
风险主题：“，
风险：“，
风险所有人：“，
风险可能性：0，
风险后果：0，
风险速度：“
};
risk.riskID=c.riskID；
risk.risk似然=c.剩余剩余剩余概率；
risk.riskResult=Math.max(
c、 剩余安全，
c、 剩余安全，
c、 剩余环境，
c、 剩余资金，
c、 剩余的，
c、 剩余法律，
c、 剩余置换
);
risk.riskVelocity=c.riskVelocity；
risk.riskTheme=c.riskTheme；
risk.risk=c.风险；
risk.riskOwner=c.riskOwner；
riskTableData.push（风险）；
});
console.log（riskTableData）；
this.setState（prevState=>({
riskData:riskTableData
}));
});
});
}
public render（）：React.ReactElement{
返回(
报告
);
}
}

子组件

import * as React from "react";
import * as ReactDom from "react-dom";
import styles from "./Reporting.module.scss";
import { RiskReportHeatMapProps } from "./RiskReportHeatMapProps";
import { RiskReportHeatMapState } from "./RiskReportHeatMapState";
import { escape } from "@microsoft/sp-lodash-subset";

export class RiskReportHeatMap extends React.Component<
  RiskReportHeatMapProps,
  RiskReportHeatMapState
> {
  public static defaultProps: Partial<RiskReportHeatMapProps> = {};

  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  private handleChange(event): void {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }

  public render(): React.ReactElement<RiskReportHeatMapProps> {
    return (
      <div className={styles.HeatMap}>
        Risk Report Heatmap<br />
        <br />
        <table className={styles.HeatMapTable}>
          <thead />
          <tbody>
            <tr>
              <td className={styles.HeatMapYMarginLegend}>5</td>
              <td className={styles.HeatMapAmberCell} />
              <td className={styles.HeatMapAmberCell} />
              <td className={styles.HeatMapRedCell} />
              <td className={styles.HeatMapRedCell} />
              <td className={styles.HeatMapRedCell} />
            </tr>
            <tr>
              <td className={styles.HeatMapYMarginLegend}>4</td>
              <td className={styles.HeatMapGreenCell} />
              <td className={styles.HeatMapAmberCell} />
              <td className={styles.HeatMapRedCell} />
              <td className={styles.HeatMapRedCell} />
              <td className={styles.HeatMapRedCell} />
            </tr>
            <tr>
              <td className={styles.HeatMapYMarginLegend}>3</td>
              <td className={styles.HeatMapGreenCell} />
              <td className={styles.HeatMapAmberCell} />
              <td className={styles.HeatMapAmberCell} />
              <td className={styles.HeatMapRedCell} />
              <td className={styles.HeatMapRedCell} />
            </tr>
            <tr>
              <td className={styles.HeatMapYMarginLegend}>2</td>
              <td className={styles.HeatMapGreenCell} />
              <td className={styles.HeatMapGreenCell} />
              <td className={styles.HeatMapAmberCell} />
              <td className={styles.HeatMapAmberCell} />
              <td className={styles.HeatMapRedCell} />
            </tr>
            <tr>
              <td className={styles.HeatMapYMarginLegend}>1</td>
              <td className={styles.HeatMapGreenCell} />
              <td className={styles.HeatMapGreenCell} />
              <td className={styles.HeatMapGreenCell} />
              <td className={styles.HeatMapGreenCell} />
              <td className={styles.HeatMapAmberCell} />
            </tr>
            <tr>
              <td />
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

import*as React from“React”；
从“react dom”导入*作为react dom；
从“/Reporting.module.scss”导入样式；
从“/RiskReportHeatMapProps”导入{RiskReportHeatMapProps}；
从“/RiskReportHeatMapState”导入{RiskReportHeatMapState}”；
从“@microsoft/sp lodash subset”导入{escape}”；
导出类RiskReportHeatMap扩展React.Component<
RiskReportHeatMapProps，
RiskReportHeatMapState
> {
公共静态defaultProps:Partial={}；
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
}
私人手牌更改（事件）：无效{
const target=event.target；
const value=target.type==“checkbox”？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
public render（）：React.ReactElement{
返回(
风险报告热图



5.
4.
3.
2.
1.
1.
2.
3.
4.
5.
);
}
}

我从父对象传递riskData对象，该对象包含可能性，这是我希望绘制的y轴，结果是我的x轴。表格上最多可以绘制20个数字。

如果每个

风险数据

包含x轴和y轴数据，您可以将它们分开，然后映射到它们上。如果我正确理解了你的问题，你可以这样做：

const riskData = [
  {
    riskID: "1",
    riskTheme: "",
    risk: "",
    riskOwner: "",
    riskLikelihood: 10,
    riskConsequence: 10,
    riskVelocity: ""
  },
  {
    riskID: "2",
    riskTheme: "",
    risk: "",
    riskOwner: "",
    riskLikelihood: 20,
    riskConsequence: 20,
    riskVelocity: ""
  } //etc
]

const xAxis = riskData.map(risk => ({ id: risk.riskID, consequence: risk.riskConsequence }));
const yAxis = riskData.map(risk => ({ id: risk.riskID, likelihood: risk.riskLikelihood }));

//I omitted most of your styles for brevity
const YourTable = () => (
  <div className={styles.HeatMap}>
    Risk Report Heatmap<br />
    <br />
    <table className={styles.HeatMapTable}>
      <thead />
      <tbody>
        {xAxis.map((xRisk, index) => (
          <tr key={xRisk.id}>
            <td>{index + 1}</td>
            {yAxis.map(yRisk => 
              <td key={yRisk.id}>
                L: {yRisk.likelihood}, C: {xRisk.consequence}
              </td>
            )}
          </tr>
        ))}
        <tr>
          <td />
          {riskData.map((r, i) => <td>{i + 1}</td>)}
        </tr>
      </tbody>
    </table>
  </div>
);

const riskData=[
{
riskID：“1”，
风险主题：“，
风险：“，
风险所有人：“，
风险可能性：10，
风险后果：10，
R