我在烤盘(v 1.13.1)中有一个表格,我想突出显示一些行。
var data = [{highlight:true, name:"Abc"},
{highlight:false, name:"Abc"},
{highlight:true, name:"Abc"}]
<Griddle
data={data} />
我想为所有具有突出显示==true 的行添加类。我怎样才能做到这一点?
如果您查看<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 编辑器中不起作用。