如何使用 React 顯示 html 實體？

Question

我想顯示'立方' html 實體（上標 3）。 我這樣做：

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

從組件內部調用formatArea地方'：

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

但是，瀏覽器將其顯示為ft³

Answer 1

另一種選擇是使用fromCharCode方法：

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

Answer 2

使用 JSX 找到這種方式：

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

Answer 3

使用 React fragments新方法： <>&sup3;</> 。

在您的情況下，它可以是：

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

Answer 4

• 方法一

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

• 方法二

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

• 方法三： fromCharCode

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

• 方法四

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

• 方法 5： HTML 代碼

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

• 方法六

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

• 方法七

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

然后你可以渲染它：

render() {
  return (
    {formatArea(this.props.area)}
  )
}

Answer 5

您可以使用 jsx 的dangerouslySetInnerHTML的 SetInnerHTML 功能來獲得它。

另一種方法是使用 html 實體的對應unicode字符，並僅用作普通字符串。

 const formatArea = function(val){ return val + " ft&sup3;"; } 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>

Answer 6

const formatArea = function(val){
  return <>{val} ft<span>&sup3;</span></>;
}

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

演示