React Admin TextField和TextInput不显示标签和css

Question

在React Admin中，当我将子组件移动到另一个组件并尝试在simpleform标记中呈现它时，文本字段不会显示其值，文本输入标记CSS也会丢失。我想做的是为create-and-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>
);

}；

Answer 1

我最终创建了自己的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} />