Question

刚开始使用 Typescript 并收到以下错误：

Property 'classes' is missing in type '{ title: string; text: string; industry: string; location: string; image: string; date: string; link: string; }' but required in type 'CaseStudyCardProps'

我将 react-jss 用于组件样式，想知道是否与样式对象与传递类属性本身发生冲突。

App.tsx

import CaseStudyCard from './components/CaseStudyCard'
function App() {
  return (
    <div className="App">
      <CaseStudyCard 
        title="Preparing organizations for the future"
        text="This is the body of the card and should wrap continuously" 
        industry="Healthcare" 
        location="Nowheresville" 
        image="https://source.unsplash.com/user/erondu/600x400"  
        date="March 22nd 2021"
        link="https://www.google.com"
      />
    </div>
  );
}

export default App;

CaseStudyCard.tsx

const CardHeader = ({classes, image}) => {
     const style = { 
              backgroundImage: `url(${image})`,
          };
          return (
            <header style={style} className={classes.cardHeader}>
              <h4 className={classes.cardHeader}>News</h4>
            </header>
          )
      }

const Button = ({classes, link}) => (
     <a href={link} className={classes.buttonPrimary}>
              Find out more
     </a>   
)
      
const CardBody = ({classes, date, title, text, link}) => {
      return (
        <div className={classes.cardBody}>
          <p className={classes.date}>{date}</p>
          <h2>{title}</h2>
          <p className={classes.bodyContent}>{text}</p>
          <Button classes={classes} link={link}/>
        </div>
      )
}

interface CaseStudyCardProps {
       image: string,
       classes: object,
       title: string,
       date: string,
       location: string,
       industry: string,
       link: string,
       text: string
     } 
      export default function CaseStudyCard (props: CaseStudyCardProps) {
        const classes = useStyles()
        return (
            <div className={classes.card}>
              <CardHeader classes={props.classes} image={props.image}/>
              <CardBody 
                classes={props.classes} 
                title={props.title} 
                date={props.date}
                location={props.location}
                industry={props.industry}
                link={props.link}
                text={props.text}
              />
            </div>
          )
      }

Answer 1

这是因为这里没有 classes 字段：

  <CaseStudyCard 
    title="Preparing organizations for the future"
    text="This is the body of the card and should wrap continuously" 
    industry="Healthcare" 
    location="Nowheresville" 
    image="https://source.unsplash.com/user/erondu/600x400"  
    date="March 22nd 2021"
    link="https://www.google.com"
  />

当您创建 Typescript 接口并放置字段时，如果您不包含该字段，Typescript 将抛出错误。

选项 1

使类字段可选：

interface CaseStudyCardProps {
       image: string,
       classes?: object,
       title: string,
       date: string,
       location: string,
       industry: string,
       link: string,
       text: string
     }

选项 2

从界面中删除 classes 字段。（注意这一点，如果您的某些 CaseStudyCard 实例接收到 classes 字段，那么 Typescript 将无法识别并抛出错误）

interface CaseStudyCardProps {
       image: string,
       title: string,
       date: string,
       location: string,
       industry: string,
       link: string,
       text: string
     }

选项 3

为对象提供类字段。（如果您这样做，请确保添加准确的条件，以免出现 Can not access x field of undefined 错误）

 <CaseStudyCard 
    title="Preparing organizations for the future"
    text="This is the body of the card and should wrap continuously" 
    industry="Healthcare" 
    location="Nowheresville" 
    image="https://source.unsplash.com/user/erondu/600x400"  
    date="March 22nd 2021"
    link="https://www.google.com"
    classes={}
  />

编辑：当您的 classes 对象的存在不是 100% 时，您必须相应地添加条件。例如，您在 CardBody

中使用类

const CardBody = ({classes, date, title, text, link}) => {
      return (
        <div className={classes.cardBody}>
          <p className={classes.date}>{date}</p>
          <h2>{title}</h2>
          <p className={classes.bodyContent}>{text}</p>
          <Button classes={classes} link={link}/>
        </div>
      )
}

但是，您没有 classes 或您的 classes 为空。在这种情况下，您必须添加 if 检查以避免出现问题：

const CardBody = ({classes, date, title, text, link}) => {
      return classes && Object.keys(classes).length > 0 ? (
        <div className={classes.cardBody}>
          <p className={classes.date}>{date}</p>
          <h2>{title}</h2>
          <p className={classes.bodyContent}>{text}</p>
          <Button classes={classes} link={link}/>
        </div>
      ) : null
}

或者，更合乎逻辑地，当您的类对象为空时，甚至不渲染 CardBody：

  {Object.keys(props.classes).length > 0 && <CardBody 
        classes={props.classes} 
        title={props.title} 
        date={props.date}
        location={props.location}
        industry={props.industry}
        link={props.link}
        text={props.text}
      />}

同样，在 CardHeader 中，您使用 classes 来呈现 JSX 元素。如果您的类将是空的，请不要渲染 CardHeader。或者确保您的 classes 对象 100%。

打字稿错误：类型中缺少属性“类”

1 个答案:

选项 1

选项 2

选项 3