Font Awesome отображает «[объектный объект]», если находится рядом с объединенным текстом - PullRequest
Новая
       7

Font Awesome отображает «[объектный объект]», если находится рядом с объединенным текстом

0 голосов
/ 28 августа 2018

У меня есть компонент Button, который будет использоваться на всей платформе, и у него есть реквизит textIcon, который, если он заполнен, должен показывать значок react-fontawesome рядом с text проп. 

class Button extends Component {
  render() {
    const { text, textIcon, loadingText, className, onClick, disabled, isFormGroup } = this.props;

    return (
      <div className={cx(isFormGroup && "form-group")}>
        <button className={className} onClick={onClick} disabled={disabled}>
          {
            disabled
              ? loadingText
              : textIcon ? `${<FontAwesomeIcon icon={textIcon}/>} ${text}` : text
          }
        </button>
      </div>
    )
  }
}

Проблема в том, что компонент FontAwesome отображается как `[объектный объект], если он находится рядом с текстом, но показывает значок, если это только он. Я безуспешно пробовал следующие способы: 

`${<FontAwesomeIcon icon={textIcon}/>} ${text}`

<FontAwesomeIcon icon={textIcon}/> + ` ${text}`

Как я могу это решить?

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

В вашем первом решении вы отображаете строку здесь. Компоненты / элементы React являются простыми объектами JS. Если объект не сериализуем, он отображается как [object object].

Вам нужно обернуть его 

<React.Fragment>
 <FontAwesomeIcon icon={textIcon}/> 
  {text}
</React.Fragment>

Ваше второе решение не работает, потому что троичные объекты должны возвращать только одну вещь. делая <FontAwesomeIcon icon={textIcon}/> + ${text}, вы на самом деле возвращаете два объекта.

  • React.createElement(FontAwesomeIcon)
  • и второй строковый объект {text}.
0 голосов
/ 28 августа 2018

Просто постарайтесь не объединять текст и значок, оборачивая его другим элементом. Если вы не хотите иметь <span> или что-то в вашей кнопке, вы можете использовать React.Fragment: 

import { Fragment } from 'react'; // import Fragment from React


<button className={className} onClick={onClick} disabled={disabled}>
        {
          disabled
            ? loadingText
            : textIcon ? 
                <Fragment>
                    <FontAwesomeIcon icon={textIcon}/> 
                    {text}
                </Fragment> 
                : text
        }
</button>

Информация: Фрагменты позволяют группировать список детей без добавления дополнительных узлов в DOM. Подробнее: https://reactjs.org/docs/fragments.html

...