Question

我正在使用material-table（https://material-table.com/#/），并且需要根据其值更改列中的图标。是否可以在render选项中做到这一点？

render: rowData => (
    <div>
        <i className="far fa-map-marker"></i>
        <span>{rowData.locationName}</span>
    </div>
)

谢谢！

Answer 1

继续：

render: rowData => (
    <div>
        <i className={`far ${rowData.value === someValue ? "first-icon" : "second-icon"}` }></i>
        <span>{rowData.locationName}</span>
    </div>
)

如果还有更多选择，我建议继续：

const valueToIconMap = { someValue: "first-icon", anotherValue: "second-icon", ...more values }
...somecode...
render: rowData => {
    return <div>
        <i className={`far ${valueToIconMap[rowData.value]}`}></i>
        <span>{rowData.locationName}</span>
    </div>
}

Answer 2

我不知道我是否正确理解了你想要的东西，但是这就是我可以假设你想要的东西：

import React, { useState } from "react";
import "./App.css";

import { Add, Delete } from '@material-ui/icons'

function App(props) {
    const [value, setValue] = useState("");

    const test = [<Add/>,<Delete/>];

    return (
        <div className="App">
            {test.map(e => { return e })}
        </div>
    );
}

export default App;

渲染选项[材料表]

2 个答案: