React Admin条件样式与ReferenceField问题

Question

我需要在ReferenceField中为ChipField添加一些条件样式。我一步一步地遵循了条件格式的文档。当我没有ReferenceField，但不处理ReferenceField中的任何字段时，它就会工作。有什么建议可以解决这个问题吗？这是我的代码：

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>

根据文档的内部组件将默认使用id作为OptionValue，name用作OptionText。这个问题可能与你没有以正确的方式引用值有关