Question

我正在学习React并遇到以下情况：

我有一个字符串变量，我作为一个道具传递给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 = "&deg; " + 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上设置了一个布尔道具，并基于它创建了一个JSX变量。

子组件（减去包含和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组件，其中包含您传递它的类型：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

＆＃13;

const App = () => <Child deg="&deg;" temp={25} />;
const Child = ({deg, temp}) => <div>{temp} {deg}</div>;

ReactDOM.render(<App />, document.getElementById('root'))

＆＃13;

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

＆＃13;

使用html字符转义渲染变量

2 个答案: