Передача литерала шаблона, поскольку реквизит не отображается

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

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]


reactjs javascript template-strings
person ekclone    schedule 23.04.2020    source источник
comment
Вы передаете объекты JSX в строковый шаблон. Просто удалите ${} вокруг ваших тегов.   -  person super    schedule 23.04.2020
comment
Вы можете опубликовать это как комментарий? Я хочу принять ваш ответ   -  person ekclone    schedule 23.04.2020
comment
Не передавайте HTML вообще, полностью используйте JSX.   -  person Emile Bergeron    schedule 23.04.2020

Ответы (2)


arrow_upward
3
arrow_downward

Литералы шаблонов ES6 принимают выражения внутри ${}, которые затем преобразуются в строки. Вы даете ему объекты 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>`} />
person super    schedule 23.04.2020

arrow_upward
2
arrow_downward

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

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

person AdamKniec    schedule 23.04.2020