React-Admin条件样式与ReferenceField问题

Question

我需要在ReferenceField里面的ChipField上添加一些条件样式。我遵循的是 文件 条件格式化的步骤。当我没有ReferenceField时，它可以工作，但RefereneField内的任何字段都不能工作，有什么建议可以解决这个问题吗？以下是我的代码。

import { makeStyles } from '@material-ui/core/styles';
import classnames from 'classnames';

const useStyles = makeStyles({
    green: {backgroundColor: '#00a65a' },
    red: { backgroundColor: '#f39c12' },
    blue: { backgroundColor: '#00c0ef' },
});

const MyTextField = props => {
    const classes = useStyles();
    
    const isOnhold = v => v.toUpperCase() === 'ON HOLD';
    const isInprogress = v => v.toUpperCase() === 'IN PROGRESS';
    const isCompleted = v => v.toUpperCase() === 'COMPLETED';
    console.log("props is = " + props.record[props.source]);
    console.log("isOnhold "+isOnhold(props.record[props.source]));
    console.log("isInprogress "+isInprogress(props.record[props.source]));
    console.log("isCompleted "+isCompleted(props.record[props.source]));
    return (
    <ChipField 
        className={classnames({
            [classes.red]: isOnhold(props.record[props.source]),
            [classes.blue]: isInprogress(props.record[props.source]),
            [classes.green]: isCompleted(props.record[props.source]),
        })}
        {...props} 
    />
    );
};

MyTextField.defaultProps = ChipField.defaultProps;
export const TaskList = props => (
    <List filters={<TaskFilter />} {...props} exporter={exporter}>
        <CustomizableDatagrid rowClick="edit">
            <TextField source="taskName" label="Name" />
            <ReferenceField source="taskstatusId" reference="taskstatus" label="Status">
                <MyTextField source="tStatus" label="Status"/>
            </ReferenceField>
        </CustomizableDatagrid>
    </List>
);

Answer 1

我想问题出在你的MyTextField组件上。

<ReferenceField source="taskstatusId" reference="taskstatus" label="Status">
    <MyTextField source="tStatus" label="Status"/>
</ReferenceField>
  
  
<ReferenceField source="taskstatusId" reference="taskstatus" label="Status">
  <MyTextField optionValue="id" optionText="tStatus" label="Status"/>
</ReferenceField>

根据文档，内部组件默认使用的是 身份证 作为期权值和 名称 作为 OptionText。这个问题可能与你没有以正确的方式引用数值有关。