Javascript 转义html字符的React呈现变量

我正在学习如何应对，并遇到以下情况：

我有一个字符串变量，作为道具传递给JSX渲染的不同组件

呈现组件及其子组件时，字符串不会呈现html特殊字符，而是将字符代码呈现为文本

如何获取要呈现为html的变量

以下是完全工作的组件的代码，除了

tempUnitString

变量呈现为

°；K

，而下面的

将其单位表示为°K

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Chart from '../components/chart';
import GoogleMap from '../components/google_map'

class WeatherList extends Component {
  renderWeather(cityData, tempUnits){
    const name = cityData.city.name;
    const id = cityData.city.id;
    const humidity = cityData.list.map(weather => weather.main.humidity);
    const pressure = cityData.list.map(weather => weather.main.pressure);
    const { lon, lat } = cityData.city.coord;
    let temp = cityData.list.map(weather => weather.main.temp);
    if (tempUnits === "K"){
        temp = cityData.list.map(weather => weather.main.temp);
    } else if (tempUnits === "F"){
        temp = cityData.list.map(weather => weather.main.temp * 9/5 - 459.67);
    } else {
        temp = cityData.list.map(weather => weather.main.temp - 273.15);
    }
    let tempUnitString = "° " + tempUnits;

    return (
      <tr key={ id }>
        <td><GoogleMap lat={ lat } lon={ lon } /></td>
        <td>
          <Chart color="red" data={ temp } units={ tempUnitString } />
        </td>
        <td>
          <Chart color="green" data={ pressure } units=" hPa" />
        </td>
        <td>
          <Chart color="orange" data={ humidity } units="%" />
        </td>
      </tr>);
  }
  render() {
    const tempUnits = this.props.preferences.length > 0 ? this.props.preferences[0].tempUnits : "K";

    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>City</th>
            <th>Temperature (&deg; { tempUnits })</th>
            <th>Pressure (hPa)</th>
            <th>Humidity (%)</th>
          </tr>
        </thead>
        <tbody>
          { this.props.weather.map( item => this.renderWeather(item,tempUnits) ) }
        </tbody>
      </table>
    );
  }


}

function mapStateToProps({ weather, preferences }){// { weather } is shorthand for passing state and { weather:state.weather } below
  return { weather, preferences }; // === { weather:weather }
}

export default connect(mapStateToProps)(WeatherList);

对它的调用如下所示：

export default (props) => {
  let tempDeg = '';
  if (props.isTemp){
    tempDeg = <span>&deg;</span>;
  }
  return (
    <div>
      <Sparklines height={ 120 } width={ 100 } data={ props.data }>
        <SparklinesLine color={ props.color } />
        <SparklinesReferenceLine type="avg" />
      </Sparklines>
      <div>{ average(props.data)} { tempDeg }{ props.units }</div>
    </div>
  );
}

---

没有字符串连接的html符号照常工作。出于某种原因，当您将符号与字符串连接时，符号不会被解码，而是呈现为字符

您可以像下面的示例中那样解决它，或者使用插件（例如）

const-App=（）=>；
const Child=（{deg，temp}）=>{temp}{deg}；
ReactDOM.render（，document.getElementById（'root'））

---

React实际上有一个页面可以解决这个问题和其他一些潜在的解决方案（使用unicode字符，将文件保存为utf8，使用危险的HTML）：

---

另一个选项是创建一个简单、可重用的临时组件，该组件具有您传递给它的类型：

const TEMP_C='C'；
常数TEMP_K='K'；
常量温度=（{children，unit}）=>{children}°；{unit}；
常量应用=（）=>(
温度1:25

温度2:25

);
ReactDOM.render（，document.getElementById（'root'））

Hi Jordan，问题是我想将连接的字符串作为参数传递到单独的组件中。我不想把笨重的条件逻辑放到子组件中，或者创建单独的组件来处理这一情况。我检查了你的方法，问题似乎在于字符串传递给子组件的方式，或者字符串变量到props属性的转换会改变呈现行为？下面描述了发生的情况：。谢谢詹姆斯的回答。谢谢你提供的信息。我将其标记为解决方案，因为您找到了我无法找到的文档。哈哈。最终，我需要定制这种方法并使用一些条件逻辑，因为我通过一个通用组件运行温度，该组件为温度和其他数据集创建了闪图。我将在下面添加我的最终解决方案作为附加解决方案。最后，我用该解决方案更新了问题。干杯-两件事：1。如果需要将道具传递为true（如

isTemp={true}

），实际上不需要

={true}

部分，只需将

isTemp

设置为属性（不带等号），它就会求值为true。2.您可以将if语句组合到jsx中，而无需使用

tempDeg

变量。ie将

{tempDeg}

替换为

{props.isTemp&（°；）}

也为之干杯！