0

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

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

<Griddle 
   data={data} />

我想为所有具有突出显示==true 的行添加类。我怎样才能做到这一点?

4

1 回答 1

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 编辑器中不起作用。

于 2018-09-14T11:51:41.237 回答