Question

我收到此错误和两条警告：

不应为非交互式元素指定鼠标或键盘事件听众。

和

道具验证中缺少
视频和onVideo选择

import React from 'react';

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} alt="Media" />
        </div>

        <div className="media-body">
          <div className="media-heading">{video.snippet.title}</div>
        </div>
      </div>
    </li>
  );
};

export default VideoListItem;

有人会以正确的方式帮助我纠正这些问题。

Answer 1

首先警告意味着您不应在onClick元素上拥有li事件监听器，仅在<a>或<button>元素之类的元素上。

第二个警告是关于不使用PropTypes包 - 您应该验证传递给组件的道具 - 它说明传递的道具应该是什么 - 在您的情况下video是一个对象，onVideoSelect是一个功能吧？您可以像这样使用包https://www.npmjs.com/package/prop-types：

import PropTypes from 'prop-types'; // or PropTypes = require('prop-types');

const VideoListItem = ({ video, onVideoSelect }) => {...};

VideoListItem.propTypes = {
  video: PropTypes.object.isRequired,
  onVideoSelect: PropTypes.func.isRequired,
};

如果省略isRequired，您将收到关于没有道具默认值的警告（假设您使用的是airbnb linter配置 - 看起来像它）。你可以像这样解决它：

VideoListItem.defaultProps = {
  video: {},
  onVideoSelect: () => {},
}

（ReactJS）不应为非交互式元素分配鼠标或键盘事件侦听器

1 个答案: