反应匿名组件函数 ESLint 错误

Question

我需要帮助解决这个 React 匿名函数上的这些 lint 错误。

export default {
  "text": () => { return <div className="item-icon">txt</div>; },
  "image": (props) => { return <img className="preview-img" src={props.src} alt=''/>; }
};

这是 lint 错误

  4:11  error  Component definition is missing display name  react/display-name
  5:12  error  Component definition is missing display name  react/display-name
  5:72  error  'src' is missing in props validation          react/prop-types

Answer 1

这解决了他们。

const text = () => { return <div className="item-icon">txt</div>; };
text.displayName = 'text';

const image = (props) => { return <img className="preview-img" src={props.src} alt=''/>; }
image.displayName = "image";
image.propTypes = {
  src: PropTypes.string
};

export default { text, image }

Answer 2

您可以添加注释eslint-disable并且不会出现错误

/*eslint-disable */
export default {
  "text": () => { return <div className="item-icon">txt</div>; },
  "image": (props) => { return <img className="preview-img" src={props.src} alt=''/>; },
  "audio": () => { return <div className="item-icon">audio</div>; },
  "video": () => { return <div className="item-icon">video</div>; },
  "application": () => { return <div className="item-icon">{"< />"}</div>; },
  "application/pdf": () => { return <div className="item-icon">pdf</div>; },
};