admin-on-rest: Access row's column data within a Datagrid component

问题

I have a List view where I want to render a ReferenceField field based on the value of the current row being rendered in the table that the Datagrid component creates.

How can I access the current row's data? (the values of the columns of the current row).

I tried record.processed but I get an error saying that the record object doesn't exist (processed is a column in the record that I want to check in order to format the field). I also tried resource.processed, this.props.processed, and this.props.record.processed with no success.

The piece of code that shows what I'm trying to do is the following:

<List title="Sales Inquiries" filter={{ request_type: 'sales' }}  {...props}>
      <Datagrid>
          <TextField source="id" />
          <TextField source="firstname" label="First Name" />
          <TextField source="lastname" label="Last Name" />
          <TextField source="company" />
          <TextField source="email" />
          <DateField source="timestamp" label="Received" />

          {record.processed ?
            <ReferenceField label="Processed By" source="processedBy_id" reference="Users">
              <TextField source="username" />
            </ReferenceField>
          : <span>Nobody</span> }

          <ShowButton />
      </Datagrid>
  </List>

EDIT

Did as suggested by @kunal pareek Applied a HOC to the ReferenceField field that modifies it in order to show the proper content as follows:

const CustomField = (props) => (
  <span>
    {props.record.processed ?
      <ReferenceField label="Processed By" source="processedBy_id" reference="Users">
        <TextField source="username" />
      </ReferenceField>
    : <span>Nobody</span> }
  </span>
);

回答1:

the record is not really available at the location you want as a variable. It is passed to the component as a prop.

So you can do this.

<List title="Sales Inquiries" filter={{ request_type: 'sales' }}  {...props}>
      <Datagrid>
          <TextField source="id" />
          <TextField source="firstname" label="First Name" />
          <TextField source="lastname" label="Last Name" />
          <TextField source="company" />
          <TextField source="email" />
          <DateField source="timestamp" label="Received" />
          <CustomField />

          <ShowButton />
      </Datagrid>
  </List>

const CustomField = (props) => (
          {props.record.processed ?
            <ReferenceField label="Processed By" source="processedBy_id" reference="Users">
              <TextField source="username" />
            </ReferenceField>
          : <span>Nobody</span> }
)

Above is just a simple example. I have taken your code straight and reformatted it, so it might not work straightaway. But I have been using this method to change the values of my components in several places.

You can also use HOCs. You can find examples here

https://marmelab.com/admin-on-rest/Theming.html

回答2:

The dependent-input addon can help you with that.

来源：https://stackoverflow.com/questions/44883855/admin-on-rest-access-rows-column-data-within-a-datagrid-component

标签

admin-on-rest