Javascript 如何使用React显示html实体？

我想显示“立方体”html实体（上标3）。我做得很好 这：

其中从组件内部调用

formatArea

：

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

render（）{
返回(
{formatArea（this.props.area）}
);
}

---

但是，浏览器将其显示为

ft³
您可以使用jsx的
危险的HTML
功能来获得它

另一种方法是使用html实体的对应
unicode
字符，只作为普通字符串使用


const formatArea=函数（val）{
返回值+“ft³；”；
}
常量Comp=（{text}）=>(
{'53英尺\u00B3'}
);
ReactDOM.render（，
document.getElementById（'root'））
);
使用JSX找到这种方法：

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

const formatArea=（val）=>{
返回（{val}ft3）；
}
另一种选择是使用以下方法：


方法1

const formatArea=val=>{val}ft{'³'}

方法2

const formatArea=val=>{val}ft{'\u00B3'}

方法3：

const formatArea=val=>{val}ft{String.fromCharCode（parseInt（'B3'，16））}

方法4

const formatArea=val=>{val}ft{String.fromCharCode（179）}

方法5：

const formatArea=val=>{val}ft³

方法6

const formatArea=val=>{val}ft³

方法7

const formatArea=val=>{val}ft3


然后可以渲染它：

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

使用React的新方法：
³

在您的情况下，它可以是：

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

const formatArea=函数（val）{
返回{val+''}³；
}
这是最好的答案！简单干净！花了很长时间才找到这个答案。总是危险地使用。。。尽管我真的不喜欢那样。最后是简单而干净的东西！这是一个很好的答案，但是用法很奇怪。既然这是React，那么将其呈现为
并将其声明为适当的组件（例如
const FormatArea=（{val}）=>{val}ft{³'}
thx）是没有意义的，您还可以将其与三元运算符一起使用，例如
{sortOrder=='asc'？▲；▼
render() {
  return (
    {formatArea(this.props.area)}
  )
}

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