有条件地在 React Admin ChipField 中设置图标

Question

我的 Datagrid 在我的 React Admin 应用程序中有一个 ChipField，它显示 text 属性。现在，我想使用 icon 属性向 ChipField 添加一个图标。由于 ChipField 可以具有五个静态值之一，因此图标应根据文本更改。

我的做法是：

    export const IOList = props => {   
    
    function getTypeImage(id) {
        console.log(id);
        switch(id) {
            case "image": return <ImageIcon />;
            case "document": return <FormatColorTextIcon />;
            case "audio": return <AudiotrackIcon />;
            case "video": return <VideocamIcon />;
            case "location": return <LocationOnIcon />;
        }
        
    }
    return(<List filters={IOFilters} {...props}> {
    <Datagrid>
            <TextField source="id" />
            <TextField source="name" />
            <ChipField source="type" choices={choices} icon={getTypeImage(record.type)}/>
    </Datagrid>
    </List>);
    };

但如果那行得通，我就不会在这里了。

事实上，记录是未知的。如果我完全删除函数参数并且 return 例如return <AudiotrackIcon /> 显示图标。我的问题是如何访问每一列显示的记录。

Answer 1

我想问题是您正试图将 JSX 组件作为 ChipField 的道具传递你应该从小就通过 JSX <ChipField source="type" ...> {getTypeImage(record.type)} </ChipField>

我不知道你在哪里选择记录数据，但这不是一个“美妙”的解决方案，更好的选择是弃用 ChipField 组件，因为目前它只是一个包装器，像高阶组件一样使用

在IOList中映射record并将右侧的Icon组件保存在const中，然后打印出来

const icon = getTypeImage(record.data)

    <Datagrid>
<TextField source="id" />
<TextField source="name" />
{icon}
</Datagrid>

有条件地在 React Admin ChipField 中设置图标

Set icon in React Admin ChipField conditionally

javascript

reactjs

material-ui

react-admin