将多个道具const更改为class

Question

我想将React中的功能组件转换为基于类的组件，因为我想利用state属性。 目前，我有这个组件，其中有2个道具。

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">
                    <div className="media-heading">{video.snippet.title}</div>  
                </div>

           </div>
        </li>
    )
}

我试图将其转换为类，并最终得到以下结果：

class VideoListItem extends React.Component {

    render() {
    const {video} = this.props.video
    const imageUrl=video.snippet.thumbnails.default.url;
    const{onVideoSelect} =this.props.onVideoSelect
    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">
                    <div className="media-heading">{video.snippet.title}</div>  
                </div>
           </div>
        </li>
    )
    }
}

但是，它不起作用，出现错误。 我想这与组件中的2个道具有关。 任何人都知道如何将第一个代码更改为类组件？

Answer 1

您的销毁情况有点：

const { video } = this.props.video;
const{ onVideoSelect } = this.props.onVideoSelect;

应该是这样的：

const { video } = this.props;
const{ onVideoSelect } = this.props;

如果需要，可以将它们组合在一起：

const { video, onVideoSelect } = this.props;