Я не знаю, является ли это вопросом ReactAdmin или основным c Ответьте на него. Если мне нужно удалить тег (или добавить другой), пожалуйста, сообщите мне.
В приложении ReactAdmin у меня есть ArrayField
, вложенное в FormTab
. В одном из его компонентов (DataGrid > FunctionField
) мне нужен доступ к внешней записи, доступной внутри FormTab
и его предков. Но свойство record
, которое было доступно там, теперь затенено свойством record
для ArrayField
.
Структура выглядит примерно так:
const RulesEdit = ({record, options,...rest}) => {
return (
<Edit title={/*...*/} options={options} {...rest}>
<TabbedForm>
<!-- more -->
<FormTab label="History" path="history">
<ArrayField source="history" label="">
<Datagrid>
<!-- more -->
<FunctionField label="Author" source="author_name" options={options} render={
(record, ...args) =>
console.log({record, args, options}) || // *** Need parent information here ***
(<a href={`mailto:${record.author_email}`}>{record.author_name}</a>)
}/>
<!-- more -->
</Datagrid>
</ArrayField>
</FormTab>
</TabbedForm>
</Edit>
);
}
Я подумал, что в худшем случае я мог бы просто передать копию record
сверху вниз по иерархии компонентов, и я попробовал ее например:
export const RulesEdit = ({record, options,...rest}, <b>rule=record</b>) => {
return (
<Edit title={/*...*/} options={options} <b>rule={rule}</b> {...rest}>
<TabbedForm <b>rule={rule}</b>>
<!-- more -->
<FormTab label="History" path="history" <b>rule={rule}</b> >
<ArrayField source="history" label="" <b>rule={rule}</b>>
<Datagrid <b>rule={rule}</b>>
<!-- more -->
<FunctionField label="Author" source="author_name" options={options} <b>rule={rule}</b> render={
(record, ...args) =>
console.log({record, args, options, <b>rule</b>}) || // *** `rule` is an empty object here ***
(<a href={`mailto:${record.author_email}`}>{record.author_name})
}/>
<!-- more -->
</Datagrid>
</ArrayField>
</FormTab>
</TabbedForm>
</Edit>
);
}
Но когда я достигаю свой компонент, свойство rule
становится пустым объектом.
Если я попробую это так вместо этого:
export const RulesEdit = ({record, options, ...rest}) => {
<b>const rule = record</b>
return (
<Edit title={/*...*/} options={options} rule={record} {...rest}>
<!-- ... -->
<FunctionField label="Author" source="author_name" options={options} rule={rule} render={
(record, ...args) =>
console.log({record, args, options, <b>rule</b>}) || // *** `rule` is undefined here ***
(<a href={`mailto:${record.author_email}`}>{record.author_name})
}/>
<!-- ... -->
)
}
тогда я получаю rule
неопределенным.
Я думаю, я понимаю, почему это так, особенно в последнем случае. Должно быть некоторое разделение во времени между созданием этого компонента и последующим шагом, когда к нему применяются данные. (Это расплывчатое объяснение показывает, что у меня нет опыта в React. Я выполнил несколько небольших проектов без проблем, но я не знаю, когда-нибудь я действительно понял суть; любые предложения, которые помогут мне улучшить эти знания, также быть ценным.)
Большая проблема в том, что я не знаю, как получить дополнительные родительские данные для этого потомка, когда они мне нужны во время рендеринга. Есть предложения?