javascript - React - PropTypes 不强制执行 isRequired

Question

我正在创建一个包含两个 Prop 的组件。第一个是字符串列表，例如['string1', 'string2'] 第二个是字符串列表，例如[['string1arr1' ,'string2arr1'], ['string3arr2', 'string4arr2']]。

这就是我的组件的大致样子:

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

export default function ComponentName (props){
    //insert component code here
}

ComponentName.propTypes = {
    one: PropTypes.arrayOf(PropTypes.string).isRequired,
    two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
}

当我通过具有不同数据类型的 Prop 时，例如

<ComponentName one={123} two={'abc'} />

没有发生 PropTypes 错误，组件正常执行。

我一直在浏览几个不同的教程，试图看看我做错了什么，从我所看到的情况来看，我正确地使用了 poropTypes。我也尝试过使用更简单的要求，例如 one: PropTypes.string.isRequired 但它仍然不起作用。

安装的 react 和 prop-types 的版本:

"react": "^17.0.2",
"prop-types": "^15.8.1"

Babel 依赖:

"@babel/core": "^7.16.7",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/preset-env": "^7.16.7",
"@babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",

它现在可以工作了，我不确定我做了什么来修复它:/

Answer 1

看起来不错。但是我不确定上面的示例是否与您在代码中使用的语义相同。您不能声明export default ComponentName (props)，ComponentName 是未知的，既不是函数也不是类。尝试这样的事情，也许它会解决你的问题:

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

function ComponentName (props){
    //insert component code here
}

ComponentName.propTypes = {
    one: PropTypes.arrayOf(PropTypes.string).isRequired,
    two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
}

export default ComponentName;

编辑:

你的代码在这里对我有用:

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

App.js

import logo from "./logo.svg";
import "./App.css";
import ComponentName from "./ComponentName";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ComponentName one={["123"]} two={[["923939"]]} />

        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

ComponentName.js

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

export default function ComponentName() {
  return <div>ComponentName</div>;
}

ComponentName.propTypes = {
  one: PropTypes.arrayOf(PropTypes.string).isRequired,
  two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
};