onVideoSelect против onVideoSelected

Question

в моем приложении реакции, у меня есть следующий код в компоненте

<VideoList
      onVideoSelect={(selectedVideo) => this.setState({ selectedVideo })}
      videos={this.state.videos}
/>

Приведенный выше код работает, НЕТ ПРОБЛЕМЫ, но как только я изменяю onVideoSelect на onVideoSelected , я получаю сообщение об ошибке, что onVideoSelected не является определенной функцией.

Мой вопрос заключается в том, что onVideoSelected функция, определенная в ReactJS или ES6 ?

К вашему сведению:

class VideoList extends Component {
    render() {
        const VideoItems = this.props.videos.map((video) => {
            return (
                <VideoListItem
                    onVideoSelect={this.props.onVideoSelect}
                    key={video.etag}
                    video={video} />
            )
        });
        return (
            <div>
                <ul className="col-md-8 list-group">
                    {VideoItems}
                </ul>
            </div>
        );
    }
};

Другой код:

const VideoListItem = ({ video, onVideoSelect }) => {
    const imageUrl = video.snippet.thumbnails.default.url;

    return (
        <li onClick={() => onVideoSelect(video)} className="list-group-item">
            <div className='video-list media'>

                <div className='media-left'>
                    <img className='media-object' src={imageUrl} />
                </div>

                <div className='media-body media-heading'>
                    <div className='media-heading'>
                        {video.snippet.title}
                    </div>
                </div>

            </div>
        </li >)
};

Answer 1

Если вы хотите изменить onVideoSelect на onVideoSelected, вам нужно передать его как onVideoSelected компоненту VideoListItem Like

    <VideoListItem
                onVideoSelected={this.props.onVideoSelect}
                key={video.etag}
                video={video} />

Теперь в VideoListItem onVideoSelected будет работать

     const VideoListItem = ({ video, onVideoSelected }) => {
     const imageUrl = video.snippet.thumbnails.default.url;

        return (
            <li onClick={() => onVideoSelected(video)} className="list-group-item">
               <div className='video-list media'>

                   <div className='media-left'>
                       <img className='media-object' src={imageUrl} />
                </div>

                  <div className='media-body media-heading'>
                      <div className='media-heading'>
                           {video.snippet.title}
                      </div>
                 </div>

              </div>
        </li >)
  }

Имейте в виду, чтокогда вы получаете доступ к функции, которая передается от родителя.Вам нужно получить доступ, так как вы прошли как проп