Блог

Главная - Вопросы по программированию - Вставка html-тегов в литералы шаблона в React

Вставка html-тегов в литералы шаблона в React

#javascript #reactjs #template-literals

#javascript #reactjs #литералы шаблона

Вопрос:

У меня есть переменная с литералом шаблона в React:

 const weatherForecast = `
  Today in <strong>${this.state.cityName}</strong>
  weather will be with <strong>${today.weather_state_name}</strong>,
  min temperature <strong>${parseInt(today.min_temp)}°C</strong>,
  max temperature <strong>${parseInt(today.max_temp)}°C</strong>,
  and humidity will be <strong>${today.humidity}%</strong>
`;

и я хочу вставить в него HTML-код, как вы можете видеть, это tag . Возможно ли это и как я могу это сделать. Я погуглил, но не смог найти ответ.

Ответ №1:

 const weatherForecast = 
`Today in <strong>${this.state.cityName}</strong> weather will be with <strong>${today.weather_state_name}</strong>, min temperature <strong>${parseInt(today.min_temp)}°C</strong>, max temperature <strong>${parseInt(today.max_temp)}°C</strong>, and humidity will be <strong>${today.humidity}%</strong>`;

React обработает это как строку, а не jsx.
Вместо этого вы можете сделать

 const weatherForecast = 
<p>Today in <strong>{this.state.cityName}</strong> weather will be with <strong>{today.weather_state_name}</strong>, min temperature <strong>{parseInt(today.min_temp)}°C</strong>, max temperature <strong>{parseInt(today.max_temp)}°C</strong>, and humidity will be <strong>{today.humidity}%</strong></p>;

а затем отобразите это в вашем render методе следующим образом

 render(){
  return <div>{weatherForecast}</div>
}

Комментарии:

1. Может ли это быть, но в данном случае я использую условный рендеринг с операторами if else, с огромным количеством данных вокруг этой переменной {weatherForecast}, поэтому я не могу использовать ее таким образом. В любом случае спасибо за ваше время.

2. @Ivana, но почему? JSX позволяет использовать условные выражения независимо от того, хотите вы вставить элемент или обычную строку

3. @Prithwee Das, ты был прав, большое спасибо 🙂 Ваш ответ самый простой, но вы все заслуживаете зеленых чеков 🙂

Ответ №2:

Вы можете использовать dangerouslySetInnerHTML для рендеринга HTML из строки с помощью React, но убедитесь, что используете его только в том случае, если вам абсолютно необходимо и вы контролируете значения.

Пример

 class App extends React.Component {
  state = {
    cityName: "New York",
    today: {
      weather_state_name: "Foo",
      min_temp: 0,
      max_temp: 10,
      humidity: 50
    }
  };

  render() {
    const { today } = this.state;
    const weatherForecast = `
      Today in <strong>${this.state.cityName}</strong>
      weather will be with <strong>${today.weather_state_name}</strong>,
      min temperature <strong>${parseInt(today.min_temp)}°C</strong>,
      max temperature <strong>${parseInt(today.max_temp)}°C</strong>,
      and humidity will be <strong>${today.humidity}%</strong>
    `;
    return <div dangerouslySetInnerHTML={{ __html: weatherForecast }} />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Ответ №3:

Вам нужно проанализировать HTML, потому что в вашем случае он покажет вам ваши теги вместо того, чтобы делать текст строгим.

Вы можете использовать, например import ReactHtmlParser from 'react-html-parser'; 

 ReactHtmlParser(weatherForecast)

Отвечает ли это на ваш вопрос?

Ответ №4:

 <div dangerouslySetInnerHTML={{__html: weatherForecast }} />

Вы можете использовать этот код для отображения.

Ответ №5:

Запись в JSX:

 const weatherForecast = <div>
  Today in <strong>{this.state.cityName}</strong>
  weather will be with <strong>{today.weather_state_name}</strong>,
  min temperature <strong>{parseInt(today.min_temp)}°C</strong>,
  max temperature <strong>{parseInt(today.max_temp)}°C</strong>,
  and humidity will be <strong>{today.humidity}%</strong>
</div>;

Не забудьте опустить знаки dollor ($)

Ответ №6:

У меня было что-то похожее на эту проблему, пришлось вставлять элементы в атрибут, я просто использовал что-то подобное, и это было исправлено.

 <Component title={
   <Fragment>
      <p>Some text <strong>bold text</strong></p>
      <p>Another paragraph <i>text italic</i></p>
   </Fragment>
 } />