React-Admin TextField和TextInput不显示标签和CSS

问题描述

在react-admin中，当我将子组件移动到另一个组件并尝试在simpleform标记内呈现它时，文本字段未显示其值，并且textinput标记CSS也丢失了。我想做的是为create和edit标签创建一个公共组件，因此我将其分解为多个组件，然后尝试使用props.children

进行渲染。

export const AssessmentEdit = props => {
return (
    <CommonComponents {...props} componentType='edit' notif='Assessment Preference Updated successfully' redirect='list' validation={validateAssessment}>
        <FormData {...props} componentType='edit'/>
    </CommonComponents>
)

};

const CommonComponent = (props) => {
const notify = useNotify();
const redirect = useRedirect();
const onSuccess = () => {
    notify(props.notif);
    redirect(props.redirect,props.basePath);
};
const Compo = components[props.componentType];
console.log(props.componentType)
return (
    <Compo {...props}
           undoable={false}
           onSuccess={onSuccess}>
        {props.componentType === 'show' ? <SimpleShowLayout>
            {props.children}
        </SimpleShowLayout> : <SimpleForm
            redirect={props.redirect}
            validate={props.validation}>
            {props.children}
        </SimpleForm>}

    </Compo>
);

};

export const FormData = (props) => {
const classes = utilStyles();
return (
    <React.Fragment>
        {props.componentType === 'edit' && <>
            <TextField {...props} source="id" label="Id"/>
            <TextField {...props} source="organization_id" label="Organization"/>
            <TextField {...props} source="provider" label="Provider"/>
        </>}
        <TextInput  source="name" label={'Name *'}/>
        <SelectInput source="category"
                     label={'Category *'}
                     choices={AssessmentCategory}
                     optionText="name"
                     optionValue="value"/>
        <ArrayInput source="topics">
            <SimpleFormIterator>
                <TextInput/>
            </SimpleFormIterator>
        </ArrayInput>
        <TextInput source="description"
                   label={'Description *'}
                   className={classes.fullWidth}
                   options={{multiLine: true}}/>
        <RichTextInput source="instructions"
                       label={'Instructions *'}/>
        <NumberInput source="duration"
                     label={'Duration *'}/>
        <BooleanInput source="randomize_questions"/>
        <FormDataConsumer>
            {({formData,formData: {randomize_questions}}) => {
                if (randomize_questions) {
                    return <NumberInput source="question_count" label={'Question Count *'}/>
                }
                return null;
            }}
        </FormDataConsumer>
        <ArrayInput source="questions"
                    label={'Questions *'}>
            <SimpleFormIterator>
                <ReferenceInput source="questionId"
                                className={classes.fullWidth}
                                label={"Question"}
                                reference="search-questions">
                    <AutocompleteInput optionValue="id"
                                       matchSuggestion={() => true}
                                       inputText={(value) => {
                                           return value && value.question_text && value.question_text.slice(0,200)
                                       }}
                                       className={classes.fullWidth}
                                       optionText={<Custom/>}/>
                </ReferenceInput>
                <NumberInput label="Question Weight" source="question_weight"/>
            </SimpleFormIterator>
        </ArrayInput>
        <ArrayInput source="skills" label={'Skills *'}>
            <SimpleFormIterator>
                <ReferenceInput source="skillId"
                                label={"Skill"}
                                className={classes.fullWidth}
                                reference="perform-skill-search">
                    <AutocompleteInput optionValue="id"
                                       className={classes.fullWidth}
                                       optionText="display_name"/>
                </ReferenceInput>
                <SelectInput label="Skill Level"
                             choices={levels}
                             optionText="key"
                             optionValue="value"
                             source="skill_level"/>
            </SimpleFormIterator>
        </ArrayInput>
    </React.Fragment>
);

};

解决方法

我最终创建了自己的 TextField 组件并明确地传递了道具：

interface CustomTextFieldProps {
  label?: string,record?: Record,source: string
}

const CustomTextField = (props: CustomTextFieldProps) => (
    <Labeled label={props.label ? props.label : startCase(props.source)}>
        <span>{get(props.record,props.source)}</span>
    </Labeled>
);

用法：

    <CustomTextField source="fieldName" record={props.record} />