如何在点击时挂载组件？

Question

我正在使用这个 react-csv，它仅在安装时触发下载。问题是我有一个普通的 material 按钮，我需要在单击该按钮时触发它：

<MButton id="csv-download" onClick={<CSVDownload data={this.state.rowData} filename={"relatorio.csv"} target="csv-download"/>} style={{
    ...buttons.action,
    ...buttons.topRight
}}>Exportar</MButton>

onClick 中的组件听起来很荒谬，但我把它放在那里是为了说明我的观点。我该怎么做？

Answer 1

我没有测试过这个，但我过去做过这样的事情：

downloadCSV() {
  this.setState({
    downloadCSV: true
  })
}

renderCSVDownload() {
  if(this.state.downloadCSV) {
    return (
      <CSVDownload 
        data={this.state.rowData} 
        filename={"relatorio.csv"} 
        target="csv-download"/>
    )
  }
}

render() {
  return (
    <div>
      <MButton id="csv-download" onClick={this.downloadCSV} style={{
          ...buttons.action,
          ...buttons.topRight
      }}>Exportar</MButton>
      {this.renderCSVDownload()}
    </div>
  )
}

虽然 CSVLink 已经完成了您正在尝试的操作，但它不是 Material 按钮 (MButton):

<CSVLink
  data={this.state.rowData} 
  filename={"relatorio.csv"} 
  target="csv-download"
>Exportar</CSVLink>

如何在点击时挂载组件？

How to mount a component on click?

javascript

csv

reactjs