передача строкового литерала js с html в компонент и сохранение html

Question

У меня есть массив объектов, где каждый объект передается в дочерний компонент. Одним из значений объекта является текстовый блоб в виде строкового литерала. Этот BLOB-объект содержит ссылки HTML. Я хотел бы сохранить эти ссылки в дочернем компоненте. Вот как это выглядит ...

`This is my text literal with a ${<a href="http://link.com">Link</a>}.`

Я также пытался создать реагирующий объект на лету так:

`This is my text literal with a ${React.createElement('a', { href: 'https://link.com' }, 'Link')}.`

Это так выглядит так:

Это мой текстовый литерал с [объектным объектом].

Как мне получить это, чтобы отобразить ссылку?

Answer 1

Литерал шаблона без тегов (это не строковый литерал) вычисляется немедленно и приводит к строке. Внутри вашего шаблона вы создаете элемент ссылки и встраиваете его в эту строку, поэтому вызывается метод toString. Вы видите результат по умолчанию toString, [object Object].

Вы не можете передать шаблон в компонент. Вы можете передать фрагмент, содержащий ссылку:

<>This is my text literal with a <a href="http://link.com">Link</a>.</>

Это синтаксис React v16.2 +. Если вы используете что-то более старое, возможно, вам придется использовать React.Fragment напрямую (v16 +).

Если вы используете что-то до v16, у вас не будет фрагментов; тогда обычное решение - это span или div (span в этом случае я бы сказал):

// v15 and earlier
<span>This is my text literal with a <a href="http://link.com">Link</a>.</span>