Как визуализировать компонент из функции вне метода рендеринга в React?

Question

У меня есть класс React, в котором я использую плагин с именем React CSV , который преобразует массив значений в CSV и начинает загрузку вновь созданного файла CSV в браузере.

Я вызываю функцию, когда нажимается кнопка «Экспорт». Эта функция находится за пределами функции рендеринга (хотя тот же класс React). Компонент инициирует загрузку CSV-файла сразу после его визуализации.

Мой компонент кнопки, внутри метода render ():

    <Button 
        variant="contained" 
        color="secondary"
        onClick={this.exportCSV.bind(this)}
    >
      Export
    </Button>

Моя функция exportCSV, определенная до метода рендеринга, выглядит следующим образом:

      exportCSV(){
    const csvMergedData = this.props.dataA.map((value, index) 
      => ({
            columnA: value,
            columnB: this.props.dataB[index]
    }));
   return (<CSVDownload data={csvMergedData} /> );

}

Проблема в том, что компонент CSVDownload не монтируется / не обрабатывается, поэтому загрузка файла CSV не происходит.

Как визуализировать компонент?

PS: я прошел другие SO-ответы, но не смог найти решение.

Answer 1

Действительно, вы не можете рендерить компонент реагирования таким образом. Исправление для вас будет

class SomeComponent extends React.Component {
  state = {
    data: false
  }

  exportCsv = () => {
    const data = this.props.dataA.map((value, index)
    => ({
          columnA: value,
          columnB: this.props.dataB[index]
    }));
    this.setState({ data })
  }

  render() {
    return <React.Fragment>
      <Button 
        variant="contained" 
        color="secondary"
        onClick={this.exportCsv}
      >
        Export
      </Button>
      { this.state.data ? <CSVDownload data={this.state.data} /> : null}
    </React.Fragment>
  }
}

Answer 2

Компонент CSVDownload не монтируется, поскольку при возврате компонента из функции обработчика событий компонент не отображается. Для визуализации компонента он должен быть в методе рендеринга.

Я бы предложил перевести csvMergedData в состояние вашего компонента и инициализировать его нулем:

class YourComponent extends React.Component {
    state = { csvMergedData: null };

Затем в вашей функции exportCSV вы можете выполнить отображение и сохранить его в состоянии:

exportCSV() {
    const csvMergedData = this.props.dataA.map((value, index) => ({
        columnA: value,
        columnB: this.props.dataB[index]
    }));
    this.setState({ csvMergedData });
}

И, наконец, в вашем методе рендеринга вы можете условно визуализировать компонент CSVDownload в зависимости от состояния:

<Button 
    variant="contained" 
    color="secondary"
    onClick={this.exportCSV.bind(this)}
>
  Export
</Button>

{this.state.csvMergedData
    ? <CSVDownload data={this.state.csvMergedData} />
    : null
}