Передача метода от родителя к дочернему компоненту (без использования обработчиков)

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

К какому компоненту вы пытаетесь привязать formatTime? Похоже, он есть в альбоме, но вы вызываете его с помощью this в PlayerBar.

jmargolisvt 02.03.2019 16:25

передайте функцию ref как formatTime = {this.formatTime}, а из дочернего элемента вызовите ее как <div className = "current-time">{this.props.formatTime(this.props.c‌​urrentTime)}</div>.

Mayank Shukla 02.03.2019 16:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
35
2

Ответы 2

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

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

к

formatTime = {this.formatTime}

который не передаст функцию, он передаст значение, возвращаемое функцией.

Mayank Shukla 02.03.2019 16:31

Да, извините, ответил слишком быстро :)

ArthurBK 02.03.2019 16:32

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

formatTime = {this.formatTime}

или

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

Другие вопросы по теме