Передача метода из родительского в дочерний компонент (без использования обработчиков) - PullRequest
0 голосов
/ 02 марта 2019

Я немного борюсь со следующим: - У меня есть 2 компонента, Album.js и PlayerBar.js - Я определил метод formatTime() в Album.js и хотел бы передать его в PlayerBar.

Цель: в PlayerBar я хотел бы вызвать метод formatTime() для преобразования длительности времени из сс в чч.мм.сс.,Я знаю, как передавать методы в качестве обработчиков событий, но в этом случае метод всегда должен применяться (он не основан на событии щелчка или указателя мыши ...).Я пытался каким-то образом, но я все еще не могу передать метод от родителя к ребенку и вызвать его от ребенка, чтобы преобразовать продолжительность.

Album.js (родительский компонент) (полный код)

    class Album extends Component {
       constructor(props) {
       super(props);

    formatTime(duration) {
        var d = Number(duration);
        var h = Math.floor(d / 3600);
        var m = Math.floor(d % 3600 / 60);
        var s = Math.floor(d % 3600 % 60);

        var hDisplay = h > 0 ? h + (h == 1 ? " " : ":") : "";
        var mDisplay = m > 0 ? m + (m == 1 ? ":" : ":") : "";
        var sDisplay = s > 0 ? s + (s == 1 ? ":" : " ") : "";
        return hDisplay + mDisplay + sDisplay;
        }

 //...

 <PlayerBar
         isPlaying={this.state.isPlaying}
         currentSong={this.state.currentSong}
         currentTime={this.audioElement.currentTime}
         duration={this.audioElement.duration}
         formatTime={() => this.formatTime(this.currentTime)}
         volume={this.state.volume}
         handleSongClick={() => this.handleSongClick(this.state.currentSong)}
         handlePrevClick={() => this.handlePrevClick()}
         handleNextClick={() => this.handleNextClick()}
         handleTimeChange={(e) => this.handleTimeChange(e)}
         handleVolumeChange={(e) => this.handleVolumeChange(e)}

         />

PlayerBar.js (дочерний компонент) (полный код)

//...

    <div className="current-time">{this.props.formatTime(this.props.currentTime)}</div>

Ответы [ 2 ]

0 голосов
/ 02 марта 2019

В Album.js измените значение formatTime на следующее

formatTime={this.formatTime}

или

formatTime={(time) => this.formatTime(time)}
0 голосов
/ 02 марта 2019

Если у вас нет обработчика событий, вы можете изменить

formatTime={() => this.formatTime(this.currentTime)}

на

formatTime={this.formatTime}

...