如何在React中的render方法之外的函数中渲染组件？

Question

I have a React class in which Im using a plugin called React CSV which converts an array of values into CSV and starts a download of the newly created CSV file in the browser.

I call a function when the button called Export is clicked. This function is outside the render function(Same React class though). The component triggers a download of the CSV file as soon as its rendered.

My button component, inside the render() method :

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

My exportCSV function which is defined before the render method is as follows:

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

}

The problem is, CSVDownload component is not getting mounted/rendered, hence the download of the CSV file isn't happening.

How to render the component?

PS : I have gone through other SO answers, but I couldn't find the solution.

Answer 1

The CSVDownload component isn't mounting because returning the component from an event handler function does not render the component. In order to render a component, it needs to be in the render method.

I would suggest putting csvMergedData into your component's state and initializing it to null:

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

Then in your exportCSV function, you can do the mapping and save it in state:

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

And finally in your render method, you can conditionally render the CSVDownload component depending on the state:

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

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

Answer 2

Indeed you can't render react component this way. A fix for you would be

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>
  }
}