如何使用 React 显示 html 实体？

IT技术 javascript reactjs superscript
2021-04-14 19:32:33

我想显示'立方' html 实体（上标 3）。我这样做：

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

其中formatArea正被从组件内部称为：

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

但是，浏览器将其显示为 ft&sup3;

6个回答

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

const formatArea = (val) => {
    return val + ' ft' + String.fromCharCode(179);
}
简单干净！
2021-06-02 19:32:33
这是最好的答案！
2021-06-08 19:32:33
花了很长时间才找到这个答案。总是危险地使用......即使我真的不喜欢那样。最后一些简单而干净的东西！
2021-06-19 19:32:33

使用 React片段的新方法：

<>&sup3;</>

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

const formatArea = function(val){
    return <>{val + ' '}&sup3;</>
}
谢谢，您也可以将它与三元运算符一起使用，例如 { sortOrder === 'asc' ? <> &#x25B2;</> : <> &#x25BC;</> }
2021-06-18 19:32:33

使用 JSX 找到这种方式：

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

  • 方法一

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

  • 方法二

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

  • 方法三：fromCharCode

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

  • 方法四

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

  • 方法 5：HTML 代码

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

  • 方法六

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

  • 方法七

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

然后你可以渲染它：

render() {
  return (
    {formatArea(this.props.area)}
  )
}
这是一个很好的答案，但用法很奇怪。由于这是 React 将其渲染为<FormatArea val={this.props.area} />并声明为适当的组件，例如const FormatArea = ({val})=> <div>{val} ft{'³'}</div>
2021-06-10 19:32:33

您可以使用dangerouslySetInnerHTMLjsx 的功能来获得它。

另一种方法是使用unicodehtml 实体的对应字符，并仅用作普通字符串。

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

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>

其它你可能感兴趣的问题
上一篇如何在 JSX 中使用 map 嵌套循环？ 下一篇如何在页面重新加载时清除 react-router 中的 location.state？