React PropTypes不强制执行isRequired

Question

我正在创建一个组件，它包含两个道具。第一个是字符串列表(如['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,
}

当我用不同的数据类型通过一个道具时，例如。

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

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

我已经阅读了几个不同的教程，试图了解我做错了什么，从我可以看到的方面来看，我正确地使用了poropTypes。我也尝试过使用更简单的需求，比如one: PropTypes.string.isRequired，但它仍然不起作用。

已安装的react和支柱类型的版本：

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

巴别尔属地：

"@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,
};