如何使用React显示html实体？

Question

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

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

其中formatArea正在从组件里面叫：

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

但是，浏览器显示它为ft³

Answer 1

发现使用JSX这样：

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

Answer 2

你可以得到使用dangerouslySetInnerHTML jsx的功能。

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

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>