渲染选项中的条件 [material-table]

Question

我正在使用 material-table(https://material-table.com/#/)，我需要根据其值更改列中的图标。是否可以在渲染选项中进行：

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;

渲染选项中的条件 [material-table]

Conditions in render option [material-table]

reactjs

conditional-statements

material-table