web-dev-qa-db-ja.com

Reactを使用してhtmlエンティティを表示するにはどうすればよいですか？

'cubic' htmlエンティティ（上付き文字3）を表示したいです。私はこのようにしています：

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

ここで、formatAreaはコンポーネント内から呼び出されています '：

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

しかし、ブラウザはft&sup3;

reactjssuperscript
16
JoeTidee

JSXを使用してこの方法を見つけました。

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

別のオプションは fromCharCode メソッドを使用することです：

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

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

  • 方法1

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

  • 方法2

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

  • 方法3： fromCharCode

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

  • 方法4

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

  • 方法5： HTMLコード

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

  • 方法6

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

  • 方法7

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

次に、レンダリングできます：

_render() {
  return (
    {formatArea(this.props.area)}
  )
}
_
3
Yuci

Reactの fragments ：<>&sup3;</>を使用した新しい方法。

あなたの場合、次のようになります。

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