react-responsive-accordion -> 得到“Uncaught TypeError: Cannot read property 'number' of undefined”

Question

我是 react js 的新手，并通过使用“react-responsive-accordion”创建了一个简单的 react 应用程序来显示手风琴。按照链接'https://www.npmjs.com/package/react-responsive-accordion'这样做，但我正在低于错误

下面是代码：

package.json 类：

    {
  "name": "reactapp",
  "version": "1.0.0",
  "description": "React JS Application",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.9.0",
    "react": "^16.1.1",
    "react-collapsible": "^2.0.3",
    "react-dom": "^16.1.1",
    "react-responsive-accordion": "^1.0.0",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.11.0"
  }
}

main.js 类：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

App.jsx 类：

import React from 'react';
import Accordion from 'react-responsive-accordion';

class App extends React.Component {
      render() {
      return (
        <div>
            <Accordion>
               <div data-trigger="A nifty React accordion component">
        <p>So this is an Accordion component that used the <a href="https://github.com/glennflanagan/react-collapsible">react-collapsible</a> component. How handy.</p>
      </div>

      <div data-trigger="What the difference?" data-trigger-when-open="THAT is the difference!">
        <p>An Accordion is different to a Collapsible in the sense that only one "tray" will be open at any one time.</p>
      </div>

      <div data-trigger="I'm responsive and I have a little secret. Look inside.">
        <p>And this Accordion component is also completely repsonsive. Hurrah for mobile users!</p>
      </div>
            </Accordion>
        </div>
      );
   }
}

export default App;

webpack.config.js：

var config = {
    entry: './main.js',
    output: {
        path: '/',
        filename: 'index.js'
    },

    devServer: {
        inline: true,
        port: 8089
    },

    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015','react']
                }
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
              }
        ]
    }
}

module.exports = config;

如有任何帮助解决此问题，我们将不胜感激。

Answer 1

在另一个包上遇到了同样的问题，并决定现在降级 React。这个问题似乎是由 React 的变化引起的。如果您更深入地查看代码，它实际上会抱怨：

propTypes: {
  transitionTime: _react2.default.PropTypes.number,

发生这种情况是因为处理 PropTypes 的方式发生了变化。显然，处理它们的旧方法已在版本 16 中删除。您可以在此处阅读更多信息：https://reactjs.org/docs/typechecking-with-proptypes.html

以及我能想到的可能解决方案：

• 使用旧版本的 react（如 Nandu Kalidindi 给出的示例中的 15.6.1）。

• 修复模块

Answer 2

根据 https://github.com/glennflanagan/react-responsive-accordion/blob/master/src/Accordion.js#L15，Accordion 需要 this.props.children 和 data-trigger 的子数组。

将您的渲染方法修改为类似的内容，以提供有效的子道具。或者查看这个工作示例WORKING DEMO

render() {
  return (
    <div>
      <Accordion>
        <div data-trigger="A nifty React accordion component">
          <p>So this is an Accordion component that used the <a href="https://github.com/glennflanagan/react-collapsible">react-collapsible</a> component. How handy.</p>
        </div>

        <div data-trigger="What is the difference?" data-trigger-when-open={<div><span style={{color: "yellow"}}>THAT</span> is the difference!</div>}>
          <p>An Accordion is different to a Collapsible in the sense that only one "tray" will be open at any one time.</p>
        </div>       
      </Accordion>    
    </div>
  );
}

Answer 3

包仅适用于每个 github repo 的 react 15。在 16 中更改了对 proptypes 的处理

Answer 4

即使我遇到了同样的问题，但它得到了解决。仅在 package.json 中进行了更改。以下是所做的更改。尝试为以下所有这些给出确切的值：

"prop-types": "^15.6.2"
"react": "^15.4.0"
"react-dom": "^15.4.0"

之前这些是 16.x.x。我只是更改为低于 15.5.x 的版本，我在某处读到的版本是稳定的。

在此之后转到我的终端或 windows 中的 cmd 并转到创建 react-app 的文件夹，即 node_modules、src 所在的文件夹，然后按

npm install --save

npm start

这可能对某些人有帮助。

Answer 5

我的情况是这样的，通过使用 React.PropType，我得到错误 'Uncaught TypeError: Cannot read property 'number' of undefined'

Header.propTypes = {
    userid: React.PropType.number
};

然后我改为使用“prop-types”中的 PropTypes：

import PropTypes from 'prop-types';

...

Header.propTypes = {
    userid: PropTypes.number
};

更多详情请参考https://reactjs.org/docs/typechecking-with-proptypes.html，我正在使用：

"react": "^16.6.1",
"react-dom": "^16.6.1",

Answer 6

安装 react-collapsible-react16 用于 React 版本 16 及更高版本。这对我有用。