如何从React函数组件向类组件传递状态更新函数

我有两个React文件，函数组件Combine通过useState定义了selectedVideo状态和setSelectedVideo更新函数，需要把这个更新函数传递给类组件Overview，让Overview的fileSelection方法能调用它更新状态。以下是初始代码片段和更新后的完整代码及实现说明：

初始代码片段 #

Combine.js #

function Combine() {
    const [selectedVideo, setSelectedVideo] = useState(null);

    return (
        <div className="containers">
            <div class="tree">
                <Overview setSelectedVideo={setSelectedVideo}/>
            </div>
        </div>
    );
}

export default Combine;

Overview 类组件 #

export default class Overview extends React.PureComponent {
  fileSelection(args) {
    // 检查选中项是否为文件
    if (args.fileDetails.isFile && args.action == 'select') {
      // 打印文件在文件管理器中的完整路径
      console.log(args.fileDetails.filterPath + args.fileDetails.name);
      // 更新状态变量（此处直接调用setSelectedVideo会报错，因为未在类组件中定义）
      setSelectedVideo(args.fileDetails.filterPath + args.fileDetails.name);
    }
  }

  render() {
      return (
          
            ...
            
       );
  
   }
}

更新后的完整代码 #

Combine.js #

import React, { useState } from "react";
import Overview from "./FileManager";

function Combine() {
    const [selectedVideo, setSelectedVideo] = useState(null);
    const handleSelectedVideo = (arg) => {
        setSelectedVideo(arg)
      }

    return (
        <div className="containers">
            <div class="tree">
                <Overview handleSelectedVideo={handleSelectedVideo}/>
            </div>
        </div>
    );
}

export default Combine;

FileManager.js #

import { render } from 'react-dom';
import * as React from 'react';
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar, ContextMenu } from '@syncfusion/ej2-react-filemanager';

/**
 * File Manager full functionalities sample
 */
export default class Overview extends React.PureComponent {
  hostUrl = "https://amazons3.azurewebsites.net/api/AmazonS3Provider/";

  fileSelection(args) {
    // 检查选中项是否为文件
    if (args.fileDetails.isFile && args.action == 'select') {
      // 打印文件在文件管理器中的完整路径
      console.log(args.fileDetails.filterPath + args.fileDetails.name);
     // 通过props调用状态更新函数
      this.props.handleSelectedVideo(args.fileDetails.filterPath + args.fileDetails.name);
    }
  }

  render() {
      return (
      <div>
              <div className="control-section">
                  <FileManagerComponent id="filemanager"                
                ajaxSettings={{
                  url: 'http://localhost:62870/api/AmazonS3Provider/AmazonS3FileOperations',
                  downloadUrl:
                    'http://localhost:62870/api/AmazonS3Provider/AmazonS3Download',
                  uploadUrl:
                    'http://localhost:62870/api/AmazonS3Provider/AmazonS3Upload',
                  getImageUrl:
                    'http://localhost:62870/api/AmazonS3Provider/AmazonS3GetImage',
                }} searchSettings={{ allowSearchOnTyping: false }}
             fileSelect={this.fileSelection}
            uploadSettings={{ maxFileSize: 400000000 }}
               >
                  <Inject services={[NavigationPane, DetailsView, Toolbar, ContextMenu]}/>
                  </FileManagerComponent>
              </div>
          </div>);
}
}

实现说明 #

1. 封装状态更新函数：在Combine组件中定义handleSelectedVideo作为中间函数，封装setSelectedVideo后传递给类组件，让状态更新逻辑更可控。
2. 类组件调用props方法：在Overview的fileSelection方法中，通过this.props.handleSelectedVideo调用传递过来的函数，将选中文件的路径作为参数传入，完成Combine组件中selectedVideo状态的更新。
3. this指向注意：若类组件中事件回调出现this为undefined的情况，可通过箭头函数定义fileSelection，或在构造函数中绑定this解决。

内容的提问来源于stack exchange，提问作者marcorivera8