如何修复“道具验证 eslint React/prop-types 中缺少”错误？

Question

道具验证 eslint 中缺少“名称”react/prop-types

道具验证 eslint 中缺少“描述”react/prop-types

export default function Note({name,description}) {
  return (
    <div>        
        <h1>{name}</h1>
        <p>{description}</p>
    </div>
  )
}

import Note from './Note'

export default function NoteList() {
  return (
    <div>
        <Note name="roze" description="Lorem ipsum dolor sit amet consectetur" />
        <Note name="sam" description="Lorem ipsum dolor sit amet consectetur" />
    </div>
  )
}

Answer 1

您可以使用此命令尝试prop-types包

npm 安装 prop-types

然后对于您的情况，您可以使用此代码

  // Note.js
  import React from 'react';
  import PropTypes from 'prop-types';

 export default function Note({ name, description }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  );
  }

  Note.propTypes = {
  name: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
 };

和 NoteList.js 保持原样

Answer 2

代码希望您为传递到

Note

组件的 props 创建一个类型。你可以这样做：

type NoteProps = {
   name: string;
   description: string;
}

export default function Note({name,description}: NoteProps) {
  return (
    <div>        
        <h1>{name}</h1>
        <p>{description}</p>
    </div>
  )
}