javascript - (ReactJS) 不应为非交互元素分配鼠标或键盘事件监听器

Question

我收到此错误和两个警告:

Non-interactive elements should not be assigned mouse or keyboard event listeners.

和

video and onVideo select are missing in props validation

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 包 - 你应该验证你传递给你的组件的 Prop - 它说明了传递的 Prop 应该是什么 - 在你的情况下 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 ，你会收到关于 props 没有默认值的警告(假设你使用的是 airbnb linter 配置 - 看起来像这样)。你可以像这样修复它:

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