Как вставить HTML внутри литеральных строк шаблона? - PullRequest
Новая
       20

Как вставить HTML внутри литеральных строк шаблона?

1 голос
/ 21 июня 2019

В React я хочу использовать слова стиля в строке, определенной в переменной с использованием литералов шаблона. Для этого я использую просто стилизовать это слово. Я получаю ошибку использования HTMLIntrinsic.

Примечание. Решение, данное в SO для вопросов, связанных с этим, не решает проблему, с которой я столкнулся. Пожалуйста, проверьте код.

Как обойти эту проблему

Попытка использования опасного ввода HTML, но не рекомендуемого решения. 

    //Actual code
    const temperature = "22";
    const list = {
       item: `The temperature is ${temperature}`
    }

    //To style it-
    const temperature = "22";
    const list = {
       item: `The temperature is <span style={{color:'red'}}>${temperature}</span>`
    }

    //And the above list.item is inserted inside JSX like -
    return (
      <div>{list.item}</div>
    )

Необходимо определить температуру (22).

Ответы [ 3 ]

1 голос
/ 21 июня 2019

Вместо строки шаблона вы можете использовать элементы JSX для генерации HTML как обычно, расположенные рядом с вашими текстовыми элементами. Пример: 

item: (
  <>
    The temperature is
    <span style={{color:'red'}}>
      {temperature}
    </span>
  </>
)

Я использую Фрагмент , чтобы обернуть текст и элементы вместе, но вы можете использовать что-то еще, например div, если вы тоже хотите стилизовать оболочку.

0 голосов
/ 21 июня 2019

Вы можете сделать это так просто, как это, ЕСЛИ у вас все в порядке, чтобы не иметь объект, как вы определили 

return(
  <div>The temperature is <span style={{color: 'red'}}>{temperature}</span></div>
)
0 голосов
/ 21 июня 2019

Вы не можете использовать React в шаблоне-литерале подобным образом, потому что компонент React является объектом.Использование его с шаблоном-литералом приведет к [object Object].Поэтому я рекомендую использовать другой способ, например решение от @ richardo

...