Передача информации о записи в ReactAdmin из родительского FormTab через дочерний ArrayField - PullRequest
0 голосов
/ 30 апреля 2020

Я не знаю, является ли это вопросом 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. Я выполнил несколько небольших проектов без проблем, но я не знаю, когда-нибудь я действительно понял суть; любые предложения, которые помогут мне улучшить эти знания, также быть ценным.)

Большая проблема в том, что я не знаю, как получить дополнительные родительские данные для этого потомка, когда они мне нужны во время рендеринга. Есть предложения?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...