转义字符不能在ReactJS映射循环中工作

Question

我有文件调用ArrayCustomer.js包含如下数组：

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

然后我将该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标签。因此，我开始筹款，希望您能对我有所帮助。谢谢。

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