javascript - 使用转义的 html 字符 react 渲染变量

Question

我在学习React，遇到过如下情况:

我有一个字符串变量，我将它作为 prop 传递给由 JSX 呈现的不同组件。

组件及其子组件渲染时，字符串不渲染html特殊字符，而是将字符编码渲染为文本。

如何让变量呈现为 html？

这里是一个完整工作的组件代码，除了 tempUnitString变量呈现为 ° K , 而 <th>下面将其单位表示为°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);

更新

使用@James Ganong 传递给我的文档，我在子组件 isTemp 上设置了一个 bool 值属性。并基于它创建了一个 JSX 变量。

子组件(减去 includes 和 func 定义)如下所示:

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

对它的调用如下所示:

<Chart color="red" data={ temp } units={ tempUnits } isTemp={ true } />

Answer 1

React 实际上有一个页面解决这个问题和其他一些潜在的解决方案(使用 unicode 字符，将文件保存为 utf8，使用 dangerouslySetInnerHtml):jsx-gotchas

---

另一种选择是创建一个简单的、可重用的 Temp 组件，该组件具有您传递给它的类型:

const TEMP_C = 'C';
const TEMP_K = 'K';

const Temp = ({ children, unit }) => <span>{children}&deg;{unit}</span>;

const App = () => (
  <div>
    <p>Temperature 1: <Temp unit={TEMP_K}>25</Temp></p>
    <p>Temperature 2: <Temp unit={TEMP_C}>25</Temp></p>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>