6
votes

Insertion de balises html dans les littéraux de modèle dans React

J'ai une variable avec un modèle littéral dans 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>
`;

et je veux y insérer du code HTML, comme vous pouvez le voir, c'est une balise. Est-ce possible et comment puis-je faire cela. Je l'ai googlé, mais je n'ai pas trouvé la réponse.

javascript reactjs template-literals

0 commentaires

4 Réponses :

1
votes

Vous devez analyser le HTML, car dans votre cas, il vous montrera votre les balises au lieu de rendre le texte fort.

Vous pouvez utiliser par exemple import ReactHtmlParser from 'react-html-parser';

ReactHtmlParser(weatherForecast)

Cela répond-il à votre question?

0 commentaires

10
votes

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

3 commentaires

C'est possible, mais j'utilise le rendu conditionnel avec des instructions if else dans ce cas, avec une énorme quantité de données autour de cette variable {weatherForecast}, donc je ne peux pas l'utiliser de cette manière. Merci, en tout cas pour votre temps.

@Ivana, mais pourquoi? JSX vous permet d'utiliser des conditions, que vous souhaitiez insérer un élément ou une chaîne simple

@Prithwee Das vous aviez raison merci beaucoup :) Votre réponse est la plus simple, mais vous méritez tous des chèques verts :)

2
votes

Vous pouvez utiliser dangerouslySetInnerHTML pour rendre du HTML à partir d'une chaîne avec React, mais assurez-vous de ne l'utiliser que si vous devez absolument le faire et que vous contrôlez les valeurs.

Exemple

<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>

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"));

0 commentaires

1
votes

<div dangerouslySetInnerHTML={{__html: weatherForecast }} />
You can use this code to display.

0 commentaires