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

我有一个React类，其中Im使用一个名为的插件，该插件将一组值转换为CSV，并开始在浏览器中下载新创建的CSV文件

当单击名为导出的按钮时，我调用一个函数。此函数在render函数之外（尽管是同一个React类）。组件在呈现CSV文件后立即触发CSV文件的下载

render（）方法中的“我的按钮”组件：

出口

在render方法之前定义的exportCSV函数如下：

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

exportCSV（）{
const csvMergedData=this.props.dataA.map（（值，索引）
=> ({
A列：价值，
columnB:this.props.dataB[索引]
}));
返回（）；

}

问题是，CSVDownload组件没有被装载/呈现，因此CSV文件的下载没有发生

如何渲染组件

---

PS：我已经查看了其他SO答案，但我找不到解决方案。

组件未装入，因为从事件处理程序函数返回组件不会呈现该组件。为了渲染组件，它需要位于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
}

出口
{this.state.csvMergedData
? 
：null
}
组件未装入，因为从事件处理程序函数返回组件不会呈现该组件。为了渲染组件，它需要位于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
}


出口
{this.state.csvMergedData
? 
：null
}
实际上，您不能以这种方式呈现react组件。你的解决办法是

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

类SomeComponent扩展React.Component{
状态={
数据：错误
}
exportCsv=（）=>{
const data=this.props.dataA.map（（值，索引）
=> ({
A列：价值，
columnB:this.props.dataB[索引]
}));
this.setState（{data}）
}
render（）{
返回
出口
{this.state.data？：null}
}
}
实际上，您不能以这种方式呈现react组件。你的解决办法是

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

类SomeComponent扩展React.Component{
状态={
数据：错误
}
exportCsv=（）=>{
const data=this.props.dataA.map（（值，索引）
=> ({
A列：价值，
columnB:this.props.dataB[索引]
}));
this.setState（{data}）
}
render（）{
返回
出口
{this.state.data？：null}
}
}