如何在React中显示HTML实体？

Question

我想展示“立方”HTML实体（上标3）。我这样做：

const formatArea = function(val){
    return val + " ft³";
}

其中formatArea是从组件内部调用的：

render(){
    return (
        <div>
            {formatArea(this.props.area)}
        </div>
    );
}

但是，浏览器显示为ft³

- JoeTidee

Answer 1

另一种选择是使用fromCharCode方法：

const formatArea = (val) => {
    return val + ' ft' + String.fromCharCode(179);
}

- Avishay28

---

这是最好的答案！ - mynameisnotallowed

简单干净！ - rvandoni

找到这个答案花了太长时间了。我一直使用危险的方法...尽管我真的不喜欢那样做。终于有了简单而干净的东西！ - lehm.ro

Answer 2

使用React的片段的新方法：

<>&sup3;</>

在你的情况下，可能会是这样：

const formatArea = function(val){
    return <>{val + ' '}&sup3;</>
}

- torvin

---

谢谢，你也可以在三元运算符中使用它，例如：{ sortOrder === 'asc' ? <> &#x25B2;</> : <> &#x25BC;</> }。 - wal

Answer 3

使用JSX找到了这种方法：

const formatArea = (val) => {
    return (<span>{val}&nbsp;ft<sup>3</sup></span>);
}

- JoeTidee

Answer 4

你可以使用jsx的dangerouslySetInnerHTML特性来实现。

另一种方法是使用html实体对应的unicode字符，然后将其作为普通字符串使用。

const formatArea = function(val){
    return val + " ft³";
}

const Comp = ({text}) => (
<div>
<div dangerouslySetInnerHTML={{__html: `${text}`}} />
<div>{'53 ft\u00B3'}</div>
</div>

);

ReactDOM.render( <Comp text={formatArea(53)} /> ,
  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>

- WitVault

Answer 5

• 方法1

  const formatArea = val => <div>{val} ft{'³'}</div>

• 方法2

  const formatArea = val => <div>{val} ft{'\u00B3'}</div>

• 方法3：fromCharCode

  const formatArea = val => <div>{val} ft{String.fromCharCode(parseInt('B3', 16))}</div>

• 方法4

  const formatArea = val => <div>{val} ft{String.fromCharCode(179)}</div>

• 方法5：HTML Codes

  const formatArea = val => <div>{val} ft&sup3;</div>

• 方法6

  const formatArea = val => <div>{val} ft&#179;</div>

• 方法7

  const formatArea = val => <div>{val} ft<sup>3</sup></div>

然后您可以将其呈现出来：

render() {
  return (
    {formatArea(this.props.area)}
  )
}

- Yuci

---

这是一个很好的答案，但用法有些奇怪。既然这是React，将其呈现为<FormatArea val={this.props.area} />并声明这些为适当的组件是否有意义？例如：const FormatArea = ({val})=> <div>{val} ft{'³'}</div> - DiamondDrake

Answer 6

const formatArea = function(val){
  return <>{val} ft<span>&sup3;</span></>;
}

render(){
    return (
        <div>
            {formatArea(this.props.area)}
        </div>
    );
}

演示

- Ren Yun