带有 ReferenceField 问题的 React-Admin 条件样式答案

【问题标题】：React-Admin conditional styling with ReferenceField issue带有 ReferenceField 问题的 React-Admin 条件样式
【发布时间】：2020-08-24 09:06:13
【问题描述】：

我需要在 ReferenceField 内的 ChipField 中添加一些条件样式。我一步一步按照documentation 进行条件格式设置。当我没有 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>
);

【问题讨论】：

标签： reactjs formatting material-ui conditional-statements react-admin

【解决方案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。这个问题可能与您没有以正确的方式引用这些值有关

【讨论】：