如何根据 griddle-react 中的单元格值更改行 class？

Question

我在烤盘 (v 1.13.1) 中有一个 table，我想突出显示一些行。

var data = [{highlight:true, name:"Abc"},
            {highlight:false, name:"Abc"},
            {highlight:true, name:"Abc"}]

<Griddle 
   data={data} />

我想将 class 添加到所有具有高亮 ==true 的行。我该怎么做？

Answer 1

如果您查看 <Row> 组件实现方式的源代码，您可以定义自己的组件。该组件接受 components 道具，您可以在那里添加您自己的逻辑，就像我在下面的演示中所做的那样。

var data = [
  { highlight: true, name: "Abc" },
  { highlight: false, name: "Abc" },
  { highlight: true, name: "Abc" }
];

const TableRow = ({
  Cell,
  griddleKey,
  columnIds,
  onClick,
  onMouseEnter,
  onMouseLeave,
  style,
  className,
  rowData
}) => {
  const appliedClassName = rowData.highlight
    ? `${className} my-own-class`
    : className;
  return (
    <tr
      key={griddleKey}
      onClick={onClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      style={style}
      className={appliedClassName}
    >
      {columnIds &&
        columnIds.map(c => (
          <Cell
            key={`${c}-${griddleKey}`}
            griddleKey={griddleKey}
            columnId={c}
            style={style}
            className={className}
          />
        ))}
    </tr>
  );
};

function App() {
  return (
    <div className="App">
      <Griddle
        components={{
          Row: props => <TableRow {...props} />
        }}
        data={data}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/griddle-react/0.8.2/Griddle.min.js"></script>

<div id="root"></div>

注意：由于某些原因，此代码在 SO 编辑器中不起作用。

如何根据 griddle-react 中的单元格值更改行 class？

How to change row class based on the cells' values in griddle-react?

reactjs

griddle