javascript - 如何有条件地格式化 react 管理中字段的标签？

Question

我的编辑 View 中有此代码部分:

         <FormTab label="Jellemzok">
             <SelectInput label="Tipus" source="type" choices={[
                 {id: 0, name: "type1"},
                 {id: 1, name: "type2"},
                 {id: 2, name: "type3"},
                 {id: 3, name: "type4"},
                 {id: 4, name: "type5"},
                 {id: 5, name: "type6"},
                 {id: 6, name: "type7"},
                 {id: 7, name: "type8"},
             ]} optionText="name" />
             <TextInput source="data_1" />
             <TextInput source="data_2" />
             <TextInput source="data_3" />
             <TextInput source="data_4" />
             <TextInput source="data_5" />
             <TextInput source="data_6" />
         </FormTab>

我必须根据上面选择的类型来标记数据字段。

所以:

如果我选择“type1”，我的标签应该是:

             <TextInput label="label1" source="data_1" />
             <TextInput label="label2" source="data_2" />
             <TextInput label="label3" source="data_3" />
             <TextInput label="label4" source="data_4" />
             <TextInput label="label5" source="data_5" />
             <TextInput label="label6" source="data_6" />

但是如果我选择“type6”，我的标签应该是这样的:

             <TextInput label="this_is_another_label1" source="data_1" />
             <TextInput label="this_is_another_label2" source="data_2" />
             <TextInput label="this_is_another_label3" source="data_3" />
             <TextInput label="this_is_another_label4" source="data_4" />
             <TextInput label="this_is_another_label5" source="data_5" />
             <TextInput label="this_is_another_label6" source="data_6" />

我怎样才能简单地做到这一点？

Answer 1

您需要使用 FormDataConsumer 组件:

<FormDataConsumer>
{({ formData }) => {
const label = formData.type === 0 ? "label" : "this_is_another_label"
return (
<>
<TextInput label={label + 1} source="data_1" />
<TextInput label={label + 2} source="data_2" />
<TextInput label={label + 3} source="data_3" />
<TextInput label={label + 4} source="data_4" />
<TextInput label={label + 5} source="data_5" />
<TextInput label={label + 6} source="data_6" />
</>
)
}}
</FormDataConsumer>