web-dev-qa-db-fra.com

Comment montrer l'entité html en utilisant React?

Je veux montrer l'entité HTML «cubique» (indice 3). Je fais comme ce:

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

où formatArea est appelé depuis l'intérieur du composant ':

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

mais, le navigateur l'affiche sous la forme ft&sup3;

reactjssuperscript
12
JoeTidee

Trouvé de cette façon en utilisant JSX:

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

Une autre option consiste à utiliser fromCharCode method:

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

Vous pouvez obtenir cela en utilisant la fonction dangerouslySetInnerHTML de jsx.

Une autre façon serait d'utiliser le caractère unicode correspondant de l'entité HTML et de l'utiliser comme chaîne normale.

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>

10
WitVault

Nouvelle méthode en utilisant fragments : <>&sup3;</>.

Dans votre cas, cela peut être:

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