Javascript ReactJS表格差异范围高光切换

我正在尝试制作一个ReactJS应用程序来展示一个表——我想要一个切换开关来显示/突出显示表行中的差异。我尝试将ref添加到表行中，尝试将它们用作输入

当前沙箱

一些JavaScript演示

import React，{Component}来自“React”；
从“react router dom”导入{withRouter}；
从“react redux”导入{connect}；
从“redux”导入{bindActionCreators}；
从“Diff”导入{Diff}；
从“react dom”导入react dom；
类Home扩展组件{
componentDidMount（）{
console.log（“显示差异”）；
}
onShowDiff（）{
var name=ReactDOM.findDOMNode（this.refs.row1_0）；/.value；
console.log（“name”，name）；
/*
常数diff=diff.diffChars(
document.getElementById（'row1_0'）。值，
document.getElementById（'row1_1'）。值，
document.getElementById（'row1_2'）。值，
document.getElementById（'row1_3'）。值
);*/
//
/*
const diff=diff.diffChars（document.getElementById（'input-1'）。值，document.getElementById（'input-2'）。值）；
常量输出=差异减少（（结果、更改）=>{
如果（change.added）返回结果+“”+change.value+“”；
if（change.removed）返回结果+“”+change.value+“”
返回结果+change.value；
}, '');
*/
//document.getElementById（'output'）。innerHTML=output；
//控制台日志（输出）；
}
onHideDiff（）{
//const output=document.getElementById（'output'）.innerHTML；
//document.getElementById（'output'）.innerHTML=output.replace（/这里的主要思想是使用状态来控制HTML的结构（按照（我认为是）标准React），并为每一行提供一个组件，以便每一行都可以计算出差异和每一行应该具有的元素

“DiffRow”可能是某些行数据集上的映射结果

我没有研究如何使用Diff来实现您想要的，这只是以您给出的Diff的使用为例，他们在第一个单元格之后找到每个单元格的Diff，并为Diff提到的内容添加带有类的跨距

由于某种原因，导入Diff似乎不起作用，所以我需要它


import React，{Component}来自“React”；
从“react router dom”导入{withRouter}；
从“react redux”导入{connect}；
从“redux”导入{bindActionCreators}；
常量差异=要求（“差异”）；
常量差异部分类名称=（部分）=>
添加部分？“添加”：删除部分？“删除”：“默认”；
常量差异单元=（单元）=>{
常数[第一个单元，…其他单元]=单元；
返回[第一个单元格].concat(
其他细胞
.map（（内容）=>Diff.diffChars（第一个单元格，内容））
.map（（差异）=>(
{differed.map（（部分，索引）=>(
{part.value}
))}
))
);
};
常量衍射=（{data，show_diff}）=>{
const cell_data=show_diff？diff_cells（数据）：数据；
返回(
{cell_data.map（（内容、索引）=>(
{content}
))}
);
};
类Home扩展组件{
建造师（道具）{
超级（道具）；
this.state={show_diff:false}；
}
componentDidMount（）{
console.log（“显示差异”）；
}
onShowDiff（）{
this.setState（{show_diff:true}）；
}
onHideDiff（）{
this.setState（{show_diff:false}）；
}
render（）{
返回(
显示差异
隐藏差异
规格1
规格2
规格3
规格4
);
}
}
函数MapStateTops（状态）{
返回{}；
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{}，dispatch）；
}
使用路由器导出默认值（连接（mapStateToProps、mapDispatchToProps）（主）；
我认为您不应该在这种情况下使用diff js库

我看到了您提到的比较站点示例。比较具有特定模式的项目更容易

而不是一个字一个字

在中，一列中有多个规范，以“逗号”分隔

如果您也有多个规范，可以这样做：

const getWords=（项目、数组、显示差异）=>{
const separatedwords=useRef（item.split（“，”）；
返回单独的dwords.current.map（（字，i）=>(
{word}
{i！==separatedwords.current.length-1&&“，”}
));
};
常量行=（{data，show_diff}）=>{
返回(
{data.map（（内容、索引）=>(
{getWords（内容、数据、显示差异）}
))}
);
};

如果不是的话，这也很容易。你可以写：

const行=（{data，show_diff}）=>{
const hasDifference=useRef（！data.every（（val，i，arr）=>val==arr[0]）；
返回(
{data.map（（内容、索引）=>(
{content}
))}
);
};

你可以在
中看到完整的代码。你的问题的核心很有趣。但是我认为如果你使用
.map
从数据数组生成表格单元格，并直接在数据数组上使用
diff
函数，而不是用一堆
引用来弄脏react代码，你将更容易组织它和
getElementById
语句。例如，可以假设每个表单元格中没有其他HTML吗？这看起来不正确-它应该突出显示差异-例如数字/部分特别不同的换行范围标记已更新样式
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

const Diff = require("diff");

const diff_part_class_name = (part) =>
  part.added ? "added" : part.removed ? "removed" : "default";

const diff_cells = (cells) => {
  const [first_cell, ...other_cells] = cells;

  return [first_cell].concat(
    other_cells
      .map((content) => Diff.diffChars(first_cell, content))
      .map((diffed) => (
        <>
          {diffed.map((part, index) => (
            <span key={index} className={diff_part_class_name(part)}>
              {part.value}
            </span>
          ))}
        </>
      ))
  );
};

const DiffRow = ({ data, show_diff }) => {
  const cell_data = show_diff ? diff_cells(data) : data;
  return (
    <tr>
      {cell_data.map((content, index) => (
        <td key={index}>{content}</td>
      ))}
    </tr>
  );
};

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { show_diff: false };
  }

  componentDidMount() {
    console.log("show differences");
  }

  onShowDiff() {
    this.setState({ show_diff: true });
  }

  onHideDiff() {
    this.setState({ show_diff: false });
  }

  render() {
    return (
      <div className="Page">
        <button id="show-diff" onClick={this.onShowDiff.bind(this)}>
          Show diff
        </button>
        <button id="hide-diff" onClick={this.onHideDiff.bind(this)}>
          Hide diff
        </button>

        <div className="table-spec">
          <table>
            <thead>
              <tr>
                <th>spec1</th>
                <th>spec2</th>
                <th>spec3</th>
                <th>spec4</th>
              </tr>
            </thead>
            <tbody>
              <DiffRow
                show_diff={this.state.show_diff}
                data={[
                  "480GB Adata SU630 SATA SSD",
                  "512GB Adata XPG SX8200 Pro NVMe SSD",
                  "512GB Adata XPG SX8200 Pro NVMe SSD",
                  "2TB NVMe SSD"
                ]}
              />
              <DiffRow
                show_diff={this.state.show_diff}
                data={[
                  "GeForce RTX 3080 10GB",
                  "GeForce GTX 1660 SUPER 6GB",
                  "Radeon RX 5500 XT 8GB",
                  "GeForce RTX 3090 24GB"
                ]}
              />
              <DiffRow
                show_diff={this.state.show_diff}
                data={[
                  "Intel Core i5 9400F 2.9GHz",
                  "AMD Athlon 3000G 3.5GHz",
                  "AMD Ryzen 7 3700X 3.6GHz",
                  "Intel Core i9 10900K 3.7GHz"
                ]}
              />
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {};
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({}, dispatch);
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Home));