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

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:我已经浏览了其他答案，但找不到解决方案。

Answer 1

CSVDownload 组件未安装，因为从事件处理函数返回该组件不会呈现该组件。为了渲染组件，它需要位于 render 方法中。

我建议将 csvMergedData 放入组件的状态并将其初始化为 null:

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
}