如何将悬停效果应用于 react-table 行中存在的单个组件。虽然有多列

Question

{
                id: "checkbox",
                accessor: "",
                Cell: ({ original }) => {
                  return (
                    <Checkbox
                      className="checkbox"
                      color={"#4caf50"}
                      onChange={() => this.toggleRow(original.id)}
                      checked={this.state.selected[original.id] === true}
                    />
                  );
                },
                Header: x => {
                  return (
                    <Checkbox
                      className="checkbox"
                      color={"#4caf50"}
                      onChange={() => this.toggleSelectAll()}
                      checked={this.state.selectAll === 1}
                    />
                  );
                },
                sortable: false,
                width: 45
              },

这是React-Table中的复选框列代码，但我想显示鼠标盘旋的特定行的复选框，否则其他行应该包含图像而不是复选框。

Answer 1

我认为使用jQuery是实际的。首先，npm i jquery在React Imports中，添加import $ from 'jquery'和内部componentDidMount()函数添加代码，类似于以下方式：将鼠标悬停在列元素上时，向其添加复选框类。完成后，删除课程。课程通过$("#id").addClass("class-name")添加，并使用$("#id").removeClass("class-name")