reactjs - 如何在选择中设置 HTML 代码在反应？

Question

我试图在我的选项中输出漂亮的分数，¼ ½ ¾ 但它显示“&frac 14;” 作为字符串。

如何让 JSX 解释我的 optionContent 并呈现 HTML，而不是作为字符串？

optionValue = "4.25" optionContent = "4 ¾" {optionContent}

标签： reactjsjsx

Answer 1

您可以使用 html-react-parser 来完成；

示例： https ://codesandbox.io/s/parsing-html-react-zlmwj

import React, { useState } from "react";
import Parser from "html-react-parser";
import "./styles.css";

export default function App() {
  const [options, setOption] = useState(1);
  const [listOptions] = useState([
    { id: 1, desc: "4 ¼" },
    { id: 2, desc: "4 ½" },
    { id: 3, desc: "4 ¾" }
  ]);

  function handleSelect(e) {
    const selected = e.target.value;
    setOption(selected);
  }

  return (
    <div className="App">
      <h1>Example parsing html in React</h1>

      <select value={options} onChange={e => handleSelect(e)}>
        {listOptions.map(option => (
          <option key={option.id} value={option.id}>
            {Parser(option.desc)}
          </option>
        ))}
      </select>
    </div>
  );
}