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

您可以使用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>

您需要解析HTML，因为在您的情况下，它将显示您的标记，而不是使文本变强。
例如，您可以使用import ReactHtmlParser from 'react-html-parser';

ReactHtmlParser(weatherForecast)

回答你的问题了吗？

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

可以使用此代码显示。

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

请记住省略美元符号（$）

我遇到了类似的问题，必须在属性中插入元素，我只是使用了一些类似的东西，它得到了修复。

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