Escape-персонаж не может работать в ReactJS зацикливании карты

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

, затем я импортирую этот Array в мой вызов компонента EditCustomer. js и в форме ввода I l oop используйте карту для показа 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>;

, но символ Escape не отображается как HTML / JSX Тег. Я из-за этого стека, надеюсь, вы можете мне помочь. Спасибо.

Answer 1

Вам необходимо использовать dangerouslySetInnerHTML для визуализации HTML строк в элементах React.

декодировать строку 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>
));