Я немного борюсь со следующим:
- У меня есть 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>
передайте функцию ref как formatTime = {this.formatTime}, а из дочернего элемента вызовите ее как <div className = "current-time">{this.props.formatTime(this.props.currentTime)}</div>.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Если у вас нет обработчика событий, вы можете изменить
formatTime = {() => this.formatTime(this.currentTime)}
к
formatTime = {this.formatTime}
который не передаст функцию, он передаст значение, возвращаемое функцией.
Да, извините, ответил слишком быстро :)
В Album.js измените formatTime prop на следующий
formatTime = {this.formatTime}
или
formatTime = {(time) => this.formatTime(time)}
К какому компоненту вы пытаетесь привязать
formatTime? Похоже, он есть в альбоме, но вы вызываете его с помощьюthisв PlayerBar.