Передача литерала шаблона как проп, не рендеринг - PullRequest
Новая
       6

Передача литерала шаблона как проп, не рендеринг

0 голосов
/ 23 апреля 2020

У меня есть функциональный компонент 

const Paragraph = forwardRef((ref: any) => {
  return (
    <div>
      <p dangerouslySetInnerHTML={{ __html: props.text }}></p>
    </div>
  );
});

Когда я вызываю этот компонент, я не могу отобразить этот литерал шаблона: 

<Paragraph text={`${<a href="#">Terms of Service</a>} and ${<a href="#">Privacy Policy</a>}`} />

результат: [object Object] and [object Object]

Ответы [ 2 ]

3 голосов
/ 23 апреля 2020

Литералы шаблона ES6 принимают внутри * 1001 выражения, которые он преобразует в строки. Вы даете ему объекты JSX ${<a href="#">Terms of Service</a>}, которые на самом деле не могут быть преобразованы в строковое представление. Лучшее, что он может сделать, это [object Object].

. Что вам действительно нужно, так это установить внутренний HTML фактическая строка <a href="#">Terms of Service</a>, поэтому простое удаление ${} вокруг ваших тегов даст ожидаемый результат. 

<Paragraph text={`<a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>`} />
2 голосов
/ 23 апреля 2020

Попробуйте удалить $ {} в строке шаблона

Редактировать: я только что заметил, что @super уже упоминал об этом в комментарии. Кредиты ему;)

...