Ошибка при передаче аргумента в функцию обратного вызова карты в React

Question

У меня есть компонент React, который использует функцию карты для отображения некоторых данных.Проблема в том, что когда я передаю функцию обратного вызова и использую свойство classes, я получаю сообщение об ошибке, которое говорит:

Uncaught ReferenceError: классы не определены

Вот мой код.Обратите внимание, что классы определены.Как мне правильно получить к нему доступ с помощью функции обратного вызова?

class ProvidersPage extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  providerRow(provider, index) {
    return <TableRow className={classes.row} key={index}>
      <CustomTableCell component="th" scope="row">
        {provider.name}
      </CustomTableCell>
      <CustomTableCell>{provider.type}</CustomTableCell>
      <CustomTableCell>{provider.pointOfContact}</CustomTableCell>
      <CustomTableCell>{provider.telephoneNumber}</CustomTableCell>
      <CustomTableCell>{provider.licenseNumber}</CustomTableCell>
      <CustomTableCell>{provider.licenseSource}</CustomTableCell>
      <CustomTableCell>
        <IconButton>
          <MoreHorizIcon />
        </IconButton>
      </CustomTableCell>
    </TableRow>
  }

  render() {
    const { classes } = this.props;

    return (
      <div>
        <Paper className={classes.root} elevation={4}>
          <Table className={classes.table}>
            <TableHead>
              <TableRow>
                <CustomTableCell>Name</CustomTableCell>
                <CustomTableCell>Type</CustomTableCell>
                <CustomTableCell>Point of Contact</CustomTableCell>
                <CustomTableCell>Telephone Number</CustomTableCell>
                <CustomTableCell>License Number</CustomTableCell>
                <CustomTableCell>License Source</CustomTableCell>
                <CustomTableCell>Actions</CustomTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {this.props.providers.map(this.providerRow)}
            </TableBody>            
          </Table>
        </Paper>
      </div>
    );
  }
}

Answer 1

Вы должны передать переменную классов функции обратного вызова, чтобы передать ее в качестве параметра.

this.props.providers.map(this.providerRow.bind(this, classes))

И прототип функции providerRow будет:

providerRow(classes, provider, index)

Или у вас есть классы вВаш реквизит также, поэтому вы должны написать эту строку для запуска функции providerRow:

const { classes } = this.props;