javascript - 转义字符无法在 ReactJS map 循环中工作

Question

我有文件调用 ArrayCustomer.js 包含这样的 ARRAY:

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

export default ArrayCustomer

然后我将该数组导入到我的组件调用EditCustomer.js
并在表单输入中循环使用 map 来显示 condi 西像这样:

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