尝试在反应组件中调用控制器内部的函数

Question

我正在尝试使用 webtorrent 桌面的基本代码，您可以在这里查看我的分支的代码： https://github.com/refreex/webtorrent-desktop

它使用 Node.js 和 Electron

我面临的问题是我创建了一个名为 playlists-controller.js 的新控制器，并且我需要在名为 playlists-list.js 的 React 组件中使用一个名为 getAllPlaylists 的函数

我正在尝试使用之前使用的相同概念，但我不明白如何从我的控制器在 react 的组件中调用该函数。

有一个名为 main.js 的文件，其中列出了控制器具有的所有功能，如下所示：

  //Playlists
  'createPlaylist': (name) => controllers.playlists().createPlaylist(name),
  'addAlbumToPlaylist': (infoHash, files) => controllers.playlists().addAlbumToPlaylist(infoHash, files),
  'addSongToPlaylist': (infoHash, file) => controllers.playlists().addSongToPlaylist(infoHash, file),
  'getAllPlaylists': () => controllers.playlists().getAllPlaylists(),

在应用程序中，有很多使用调度程序的调用，但我认为主要用于事件，但我不确定。

所以基本上在页面playlists-list.js 中我需要调用getAllPlaylists 中的函数playlists-controller.js

有什么好的方法可以做到这一点？

提前致谢。

Answer 1

这可以通过两种方式完成。一，将函数作为 props 传递给该组件，或者我们可以导出 getAllPlaylist 方法并通过导入 playlists-lists 组件来使用它。希望这能帮助您解决问题。

方法一：

 class PlaylistController extends React.Component {

    getAllPlaylist = () => {
    alert('Do Something Here As Per Your Requirement!')
    }

    render () {
    return (
        <container>
            <PlaylistList sendFunction={this.getAllPlaylist} />
        </container>
    )
    }
}

类 PlaylistList 扩展 React.Component {

render () {
return (
    <div>
        <button onClick={this.props.sendFunction}>Click Here To Call Playlist-list Function</button>
    </div>
)
}

}

方法二：

 class PlaylistController extends React.Component {
   export const getAllPlaylist = ()=>{
    //do something as per the requirement
   }
 }


import {getAllPlaylist} from './playlistController'

class PlaylistList extends React.Component {


    handleClick = () => {
    getAllPlaylist(); 
    }
    render () {
    return (
        <div>
            <button onClick={this.handleClick}>Click Here To Call Playlist-list Function</button>
        </div>
    )
    }

}