[英]How to show html entity using React?
I am wanting to show the 'cubic' html entity (superscript 3).我想显示'立方' html 实体(上标 3)。 I am doing like this:
我这样做:
const formatArea = function(val){
return val + " ft³";
}
where formatArea
is being called from inside the component':从组件内部调用
formatArea
地方':
render(){
return (
<div>
{formatArea(this.props.area)}
</div>
);
}
but, the browser is showing it as ft³
但是,浏览器将其显示为
ft³
Another option is to use fromCharCode method:另一种选择是使用fromCharCode方法:
const formatArea = (val) => {
return val + ' ft' + String.fromCharCode(179);
}
Found this way using JSX:使用 JSX 找到这种方式:
const formatArea = (val) => {
return (<span>{val} ft<sup>3</sup></span>);
}
Method 1方法一
const formatArea = val => <div>{val} ft{'³'}</div>
Method 2方法二
const formatArea = val => <div>{val} ft{'\³'}</div>
Method 3: fromCharCode方法三: fromCharCode
const formatArea = val => <div>{val} ft{String.fromCharCode(parseInt('B3', 16))}</div>
Method 4方法四
const formatArea = val => <div>{val} ft{String.fromCharCode(179)}</div>
Method 5: HTML Codes方法 5: HTML 代码
const formatArea = val => <div>{val} ft³</div>
Method 6方法六
const formatArea = val => <div>{val} ft³</div>
Method 7方法七
const formatArea = val => <div>{val} ft<sup>3</sup></div>
Then you can render it:然后你可以渲染它:
render() {
return (
{formatArea(this.props.area)}
)
}
You can get that using dangerouslySetInnerHTML
feature of jsx.您可以使用 jsx 的
dangerouslySetInnerHTML
的 SetInnerHTML 功能来获得它。
Another way would be use correspond unicode
character of html entity and just use as normal string.另一种方法是使用 html 实体的对应
unicode
字符,并仅用作普通字符串。
const formatArea = function(val){ return val + " ft³"; } const Comp = ({text}) => ( <div> <div dangerouslySetInnerHTML={{__html: `${text}`}} /> <div>{'53 ft\³'}</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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.