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

Question

我在烤盘（v 1.13.1）中有一个表格，我想突出显示一些行。

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

<Griddle 
   data={data} />

我想为所有具有突出显示==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 编辑器中不起作用。