如何使用 React 显示 html 实体？

Question

我想显示 'cubic' html 实体（上标 3）。我做的像这个：

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

从组件内部调用 formatArea':

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

但是，浏览器显示为 ft³

Answer 1

您可以使用 jsx 的 dangerouslySetInnerHTML 功能获得它。

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

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>

Answer 2

使用 JSX 以这种方式找到：

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

Answer 3

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

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

Answer 4

方法一

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>
方法五：HTML Codes

const formatArea = val => <div>{val} ft³</div>
方法六

const formatArea = val => <div>{val} ft³</div>
方法七

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

然后你可以渲染它：

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

Answer 5

使用 React 的新方法 fragments:

<>&sup3;</>

您的情况可以是：

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

Answer 6

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

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

Demo

如何使用 React 显示 html 实体？

How to show html entity using React?

javascript

superscript

reactjs