Передача строкового литерала js с html в компонент и сохранение html
У меня есть массив объектов, каждый из которых передается в дочерний компонент. Одно из значений объекта - это текстовый двоичный объект в виде строкового литерала. Этот большой двоичный объект содержит ссылки 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')}.`
Оба отрисованы так:
Это мой текстовый литерал с [object Object].
Как мне заставить это отображать ссылку?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>
Ого, интересно. Не знал этого. Сработало отлично! И самое главное, он все еще позволял мне разбивать текст на несколько строк (это необходимо, поскольку это большой текстовый объект). Это приводит к другому вопросу, как это работает, когда реагирующие элементы позволяют создавать несколько строк «из коробки». Так работает JSX?
<>, нажмите «Обновить». Ошибка копирования и вставки.)