So zeigen Sie die html-Entität verwenden Reagieren?

Ich bin zu wollen, zeigen die 'cubic' html-entity (hoch-3). Ich Tue, wie
diese:

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

wo formatArea genannt wird, aus dem inneren der Komponente':

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

aber der browser zeigt es als ft&sup3;

InformationsquelleAutor JoeTidee | 2017-05-22
  1. 13

    Fand auf diese Weise mit JSX:

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

    Andere Möglichkeit ist die Verwendung fromCharCode Methode:

    const formatArea = function(val){
    return val + ' ft' + String.fromCharCode(179);
}
    • Dies ist die beste Antwort!
    • einfach und sauber!
    InformationsquelleAutor Avishay28
  3. 10

    Bekommen Sie mit dangerouslySetInnerHTML Funktion von jsx.

    Andere Möglichkeit wäre die Verwendung entsprechen unicode Zeichen html-entity und benutzen Sie einfach als normale Zeichenfolge.

    JS:

    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')
);

    HTML:

    <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>

    InformationsquelleAutor WitVault
  4. 3

    • Methode 1

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

    • Methode 2

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

    • Methode 3: fromCharCode

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

    • Methode 4

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

    • Methode 5: HTML-Codes

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

    • Methode 6

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

    • Methode 7

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

    Dann können Sie es machen:

    render() {
  return (
    {formatArea(this.props.area)}
  )
}
    InformationsquelleAutor Yuci
  5. 2

    Neue Weise mit Reagieren ist Fragmente: <>&sup3;</>.

    In deinem Fall kann es:

    const formatArea = function(val){
    return <>{val + ' '}&sup3;</>
}
    InformationsquelleAutor torvin
Schreibe einen Kommentar