Передача строкового литерала 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].

Как мне заставить это отображать ссылку?

2
0
1 091
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>
(Извините, если вы видите обратную кавычку после ведущего <>, нажмите «Обновить». Ошибка копирования и вставки.)
T.J. Crowder 31.10.2018 14:24

Ого, интересно. Не знал этого. Сработало отлично! И самое главное, он все еще позволял мне разбивать текст на несколько строк (это необходимо, поскольку это большой текстовый объект). Это приводит к другому вопросу, как это работает, когда реагирующие элементы позволяют создавать несколько строк «из коробки». Так работает JSX?

M Leonard 31.10.2018 14:33

@MLeonard - Верно. Дело не в том, что элементы реагировать позволяют это, а в том, что это позволяет JSX. Еще здесь и здесь (JSX - это не просто React).

T.J. Crowder 31.10.2018 15:02

Другие вопросы по теме