Рендеринг HTML объектов внутри строки в React

Question

Я столкнулся с проблемой при отображении фигурных кавычек HTML сущностей в React JS. Ссылка прямые и фигурные кавычки

    render() {
      return (
              <h4>
              {theme == 'blue' && 'This is sample text'}
              {theme == 'red' && 'What&rsquo;s your role in this project'}
              </h4>
            )
         }

Текущий выход

What’s your role in this project

Ожидаемый выход Какова ваша роль в этом проекте Я не хочу использовать опасноSetInner HTML или не хочу определять эти значения в свойстве состояния реакции. Заранее спасибо.

Answer 1

Используя метод String.fromCharCode:

Проверить документы React: https://shripadk.github.io/react/docs/jsx-gotchas.html

Документы MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Чтобы найти код символа: http://www.mauvecloud.net/charsets/CharCodeFinder.html

render() {
          return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && `What ${String.fromCharCode(8217}s your role in this project`}
                  </h4>
                )
             }

шаблонные литералы '' для текста

render() {
          return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && `What’s your role in this project`}
                  </h4>
                )
             }

Использование двойных и одинарных кавычек

render() {
          return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && "What’s your role in this project"}
                  </h4>
                )
             }

Использовать escape-символ

 return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && 'What \’s your role in this project'}
                  </h4>
                )
             } 

Answer 2

Проведя небольшое исследование, я нашел самый простой способ добиться этого, используя React Fragment tag

     render() {
      return (
              <h4>
              {theme == 'blue' && 'This is sample text'}
              {theme == 'red' && <Fragment>What&rsquo;s your role in this project</Fragment>}
              </h4>
            )
         }

Answer 3

Если вы действительно не можете использовать " или строки шаблона, попробуйте вернуть фрагмент

<>What&rsquo;s your role in this project</>

Answer 4

Просто используйте строку шаблона `Какова ваша роль в этом проекте`.