反應匿名組件函數 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>; },
};