尝试调用函数内部控制器在反应组分-电脑我帮您

我试图让使用到webtorrent桌面的基础代码，在这里你可以检查我的分支代码：

它使用Node.js和受电子

我现在面临的问题是创建一个新的控制器称为playlists-controller.js，有一个叫getAllPlaylists，我需要一个阵营组件调用playlists-list.js内消费功能

我尝试使用了以前使用的相同的概念，但我不明白我怎么可以调用该函数从我的控制器反应的组件中。

还有就是这里列出所有的控制器有这样一个功能一个名为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

什么是一个好办法做到这一点？

提前致谢。

回答如下：

这可以通过两种方式来完成。其中，传递函数为道具，以该组件，或者我们可以导出getAllPlaylist方法，并通过导入到播放列表，列表组件中使用它。我希望这将帮助您解决问题。

方法1：

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

}

方法2：

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

}