在 React 的模板文字中插入 html 标签答案

【问题标题】：Inserting html tags in template literals in React在 React 的模板文字中插入 html 标签
【发布时间】：2019-08-02 20:03:24
【问题描述】：

我在 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 。这可能吗，我该怎么做。我用谷歌搜索了它，但我找不到答案。

【问题讨论】：

标签： javascript reactjs template-literals

【解决方案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>
}

【讨论】：

可以，但是在这种情况下我使用条件渲染和 if else 语句，这个 {weatherForecast} 变量周围有大量数据，因此我不能以这种方式使用它。无论如何，谢谢您的时间。
@Ivana，但为什么呢？无论您想插入元素还是纯字符串，JSX 都允许您使用条件句
@Prithwee Das 你是对的，非常感谢:) 你的答案是最简单的，但你们都应该得到绿色检查:)

【解决方案2】：

您可以使用 dangerouslySetInnerHTML 来通过 React 从字符串呈现 HTML，但请确保仅在绝对必要时才使用它并且您可以控制值。

示例

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

您可以使用此代码进行显示。

【讨论】：