javascript - 在自定义反应组件中获取道具值建议

Question

我制作了一个名为的组件TextName，它采用name这样的道具：

import PropTypes from 'prop-types';
import React from 'react';

const TextName = props => {
  const { name } = props;
  return <p>Hello {name}</p>;
};

TextName.propTypes = {
  name: PropTypes.oneOf(['X', 'Y', 'Z'])
};

export default TextName;

我将此组件导入另一个组件。这工作正常。是否可以通过像此快照这样的名称道具获得建议？

标签： javascriptreactjs

Answer 1

使用 javascript 设置无法提供道具类型建议。将其更改为 typescript 并使用 Proptypes 来获得所需的道具建议。

使用 create-react-app (cra)添加typescript到新项目：

和npm

npx create-react-app my-app --template typescript

和yarn

yarn create react-app my-app --template typescript

添加typescript到现有的反应项目：

1.安装typescript相关依赖

yarn add typescript @types/node @types/react @types/react-dom @types/jest --dev

2.更改文件扩展名

将所有返回的文件更改jsx为.tsx. 不返回的文件jsx应该有.ts扩展名

3.添加Prop类型和State类型

考虑上面的代码。要将其更改为具有道具类型建议，我们以这种方式进行更改。

    interface TextNameProps {
        name: "X" | "Y" | "Z";
    }
    
    const TextName = (props: TextNameProps) => {
      const { name } = props;
      return <p>Hello {name}</p>;
    };

在上面的代码中，我们有 2 处更改，

1. 创建一个接口TextNameProps
2. 将此添加到TextName组件的道具

4. 更新 package.json 和 tsconfig 文件

当您使用npm start或yarn startreact 运行项目时，会自动检测 tsx 的使用并添加tsconfig. 如果提示添加文件，请接受它以添加文件。

有了这个，你会看到这样的建议