转义字符无法在 ReactJS 映射循环中工作

Question

我有文件调用 ArrayCustomer.js 包含这样的数组：

const ArrayCustomer = [
  {
    index:1,
    kondisi: 'Daftar Baru',
    badge: 'badge btn-warning',
  },
  {
    index:2,
    kondisi: 'Pelanggan dibawah 10m&lt;sup&gt;3&lt;/sup&gt;',
    badge: 'badge btn-secondary',
  },
]

export default ArrayCustomer

然后我将 Array 导入我的组件调用 EditCustomer.js
并在 form input 我循环使用地图来显示 kondisi 像这样：

<FormGroup>
  <Label for="status">Status Pelanggan</Label>
  <Input
    required
    value={this.state.status}
    onChange={this.handleChange}
    type="select"
    name="status"
    id="status"
  >
    ArrayCustomer.map(item => (
    <option value={item.index}>{item.kondisi}</option>) ) }
  </Input>
</FormGroup>;

但转义字符不显示为 HTML/JSX 标记。我Stack就是因为这个，希望大家能帮帮我。谢谢

Answer 1

您需要使用 dangerouslySetInnerHTML 在 React 元素中呈现 HTML 个字符串。

使用此函数解码 HTML 字符串。

const decodeString = str => {
  var element = document.createElement("div");
  element.innerHTML = str;
  return element.childNodes.length === 0
    ? ""
    : String(element.childNodes[0].nodeValue);
};

更新map方法，添加到元素时使用decodeString方法。

ArrayCustomer.map(item => (
  <option
    value={item.index}
    dangerouslySetInnerHTML={{ __html: decodeString(item.kondisi) }}
  ></option>
));

转义字符无法在 ReactJS 映射循环中工作

Escape Character Cannot Working in ReactJS Map Looping

javascript

html

reactjs

html-escape-characters