Попробуйте вызвать функцию внутри контроллера в реагирующем компоненте. - PullRequest
Новая
       50

Попробуйте вызвать функцию внутри контроллера в реагирующем компоненте.

0 голосов
/ 08 февраля 2019

Я пытаюсь использовать базовый код рабочего стола webtorrent, здесь вы можете проверить код моей ветки: https://github.com/refreex/webtorrent-desktop

Он использует Node.js и Electron

Проблема, с которой я сталкиваюсь, - это создание нового контроллера с именем playlists-controller.js, и есть функция с именем getAllPlaylists, которую мне нужно использовать в компоненте React, с именем 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

Какой хороший подход для этого?

Заранее спасибо.

1 Ответ

0 голосов
/ 08 февраля 2019

Это можно сделать двумя способами.Во-первых, передавая функцию в качестве реквизита этому компоненту, мы можем экспортировать метод getAllPlaylist и использовать его, импортируя в компонент playlists-lists.Я надеюсь, что это поможет вам решить вашу проблему.

Метод 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>
    )
    }

}
...