Question

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

我不确定如何在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>

非常感谢任何建议。

编辑;父组件

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";
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>
    );
  }
}

我从父母那里传递了riskData对象，该对象包含我希望绘制的y轴的可能性，后果是我的x轴。桌子上可能有多达20个数字。

Answer 1

如果每个riskData包含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>
);

将状态分配给表td

1 个答案: