дочерний значок реагирующей зоны не меняется при изменении состояния - PullRequest
Новая
       9

дочерний значок реагирующей зоны не меняется при изменении состояния

0 голосов
/ 05 сентября 2018

У меня есть реактивный проект, и я использую компонент Reaction-Dropzone: 

import Dropzone from 'react-dropzone';

Я хочу сделать это с состоянием и показывать различные изображения и текст в зависимости от состояния. Я определил мои состояния как: 

const status = {
  ready: 'ready',
  preview: 'preview',
  error: 'error',
  requested: 'requested',
  success: 'success',
  failed: 'failed',
};

Состояние может меняться в зависимости от действий пользователя (поэтому, когда они перетаскивают файл в рабочую зону, я обновляю статус в состоянии следующим образом: 

onDrop(acceptedFiles, rejectedFiles) {
  // do some stuff here...
  this.setState({ status: status.preview });

}

Мой метод рендеринга состоит из трех этапов: 1. Фактические методы визуализации 

render() {
const config = {
  iconFiletypes: ['.xlsx'],
  showFiletypeIcon: true,
};

return (
  <div style={{ marginBottom: '30px' }}>
    <Dropzone
      config={config}
      onDrop={files => this.onDrop(files)}
      //className="dropzone"
      multiple={false}
    >
      {this.renderDropZoneContent()}
    </Dropzone>
  </div>
);

}

выберите, что нужно визуализировать на основе состояния: 

renderDropZoneContent() {
  switch (this.state.status) {
    case status.ready:
      return this.renderReadyState();
    case status.preview:
      return this.renderPreviewState();
    // and on down for each state / status + default case...
  }
}

и, наконец, код для отображения каждого случая как функции: 

renderPreviewState() {
  return (
    <div style={{ marginTop: '35px', textAlign: 'center' }}>
    <i className="far fa-file-excel" style={{ verticalAlign: 'middle', fontSize: '50px' }} />
    {/* There is more jsx here but I removed it for clarity */}
  </div>
  );
}

renderReadyState() {
  return (
    <div style={{ marginTop:'35px', textAlign:'center'}>
      <i className="fas fa-cloud-upload-alt" style={{ verticalAlign: 'middle', fontSize: '50px' }} />
  </div>
);

}

Ничего особенного. Моя проблема заключается в том, что при изменении состояния текст обновляется, а значок - нет. Это интересная проблема, потому что логика приложения работает, но ее конкретный элемент не обновляется. Еще более интересным является то, что я попытался обернуть все возвращаемое значение в другом div и получил ошибку: Uncaught DOMException: Не удалось выполнить «removeChild» на «Node»: удаляемый узел не является дочерним по отношению к этому узлу. Я бьюсь головой о стену. Если кто-то сталкивался с этим раньше и есть какие-либо советы, это очень ценится! *

1 Ответ

0 голосов
/ 06 сентября 2018

Вероятно, конфликт с тем, как Font Awesome и React обрабатывают рендеринг.

Если вы используете React, мы рекомендуем пакет реагировать на fontawesome или веб-шрифты с CSS.

https://fontawesome.com/how-to-use/on-the-web/using-with/react

...