Блог

Я использую настроенный IconButton элемент с ButtonGroup помощью .

При передаче пустого реквизита также изменяется цвет и форма наведения элемента. Я хочу знать, почему это произошло? Для меня HOC не должно быть другого эффекта рендеринга при передаче пустой опоры.

Я разместил минимальную среду со страницами GitHub. Этот вопрос показан во второй и третьей главах.

Использование нового настроенного компонента.

Неправильное поведение: кнопки белые и не в группе. Смотрите выделение при наведении второго и третьего «G», на котором основан компонент IconButton , без передачи {...props} .

Использование нового настроенного компонента. Все хорошо.

Компонент также основан на IconButton передаче но {...props} . Хотя реквизит не передается, следовательно, он должен быть пустым(?). Возможно useStyles , изменился цвет, но форма фона при наведении тоже изменилась.

Также я поднял соответствующий вопрос об официальном репо и в своей учебной записке

Все наоборот, если вы не передадите реквизит IconButton :

 function IconButtonWrapper(props /* unused props */) {
  return (
    <IconButton>
      <DeleteIcon />
    </IconButton>
  );
}
 

Затем стили не применяются, и IconButton изображение отображается простым белым цветом, поэтому ничего не меняется.

Хотя реквизит не передан

Реквизит передается автоматически из ButtonGroup , даже если вы ничего не передаете. Способ, которым это работает, заключается в том, что ButtonGroup клонирует дочерний компонент и передает им свой собственный набор реквизитов, поэтому, когда вы сами ничего не передаете, как это:

 <ButtonGroup variant="contained">
  <IconButtonWrapper />
  <IconButtonWrapper />
  <IconButtonWrapper />
</ButtonGroup>
 

У дочернего компонента все еще есть реквизиты, предоставленные родителем, вы можете увидеть это, зарегистрировав реквизиты:

 function IconButtonWrapper(props) {
  console.log(props);
  return (
    <IconButton {...props}>
      <DeleteIcon />
    </IconButton>
  );
}