Я немного борюсь со следующим: - У меня есть 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>