提交自定义React图片组件时遇代码校验错误，求解决方案

你的错误分为两类：Prettier格式规范问题和React props校验缺失问题，另外代码里还有一个样式语法小问题，逐个解决如下：

一、修复Prettier格式错误 #

首先你把组件文件和styled样式文件的代码混写在一起了，先拆分两个独立文件，再统一格式：

1. 组件文件（如Image.js）修正后代码： #

import * as Styled from "./Image.styled"

const Image = ({ src, alt }) => (
  <Styled.Image>
    <img src={src} alt={alt} />
  </Styled.Image>
)

export default Image

对应错误点修复：

• 第3行：解构参数前后加空格，改成({ src, alt })（解决Replace src,·alt with ·src,·alt·）
• 第4、5行：统一缩进为2个空格（解决Replace ···· with ··和Delete ··）

2. 样式文件（如Image.styled.js）修正后代码： #

import styled from "@emotion/styled"

export const Image = styled.div`
  display: inline-block;
  float: left;
  width: 100%;
`

对应错误点修复：

• 把display: inline block;改为display: inline-block;（语法修正，同时解决Insert ⏎的格式问题，确保样式属性格式规范）

二、修复React props校验缺失错误 #

ESLint要求React组件的props必须声明校验规则，步骤如下：

1. 安装prop-types依赖：

npm install prop-types
# 或 yarn add prop-types

2. 在组件文件中添加props校验：

import * as Styled from "./Image.styled"
import PropTypes from 'prop-types'

const Image = ({ src, alt }) => (
  <Styled.Image>
    <img src={src} alt={alt} />
  </Styled.Image>
)

// 添加props校验
Image.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired
}

export default Image

这样就能解决'src' is missing in props validation和'alt' is missing in props validation的错误。

内容的提问来源于stack exchange，提问作者Emilia