@ material-ui / Ошибка значков: объекты недопустимы как дочерние элементы React

Question

Я пытаюсь использовать компонент @ material-ui / Icons в своем проекте React, но когда я пытаюсь включить импортированный значок в свой код, я получаю следующую ошибку:

Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, displayName, muiName}).

довольно стандартно, когда вы пытаетесь отобразить объект, а не одно из его значений.Однако в этом случае я не совсем уверен, как отобразить импортированный значок.

Я попытался console.logging значок, чтобы посмотреть, смогу ли я понять, что происходит, но это не помогло.help.

Я также пытался импортировать:

import SvgIcon from '@material-ui/core';

Но это все равно не сработало.

Я импортирую свою иконку:

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';

Затем я пытаюсь вставить его на свою страницу (упрощенный пример}:

<Fragment>
   {AccessAlarmIcon}
</Fragment>

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

Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, displayName, muiName}).

Есть ли что-то, чего мне здесь не хватает?

Должен ли я импортировать что-то еще из @material-ui/core?

Answer 1

Это потому, что вы не ссылаетесь на него как на класс React.Это должен быть тег для использования.Вы можете определить свой значок, как показано ниже.Я попробовал, и это сработало:

<Fragment>
     <AccessAlarm/>
</Fragment>