反应 - 响应 - 手风琴 - ＆gt;得到＆＃34;未捕获的TypeError：无法读取属性＆＃39; number＆＃39;未定义＆＃34;

Question

我是新手，通过使用＆＃39; react-responsive-accordion＆＃39;来反应js并创建一个简单的反应应用来显示手风琴。按照链接＆＃39; https://www.npmjs.com/package/react-responsive-accordion＆＃39;这样做，但我低于错误

以下是代码：

package.json class：

fields

main.js类：

    {
  "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"
  }
}

App.jsx class：

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

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

webpack.config.js：

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;

任何有助于解决此问题的帮助都将不胜感激。

Answer 1

在另一个程序包中遇到同样的问题，并决定暂时降级React。问题似乎是由React的变化引起的。如果你仔细研究代码，它实际上会抱怨：

<div class="dots"></div>

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

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

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

• 修复模块

Answer 2

根据此https://github.com/glennflanagan/react-responsive-accordion/blob/master/src/Accordion.js#L15，Accordion预计会有data-trigger个孩子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> ); } 。

将渲染方法修改为类似的东西，以便提供有效的子道具。或者查看此工作示例WORKING DEMO

REGISTER_SOLVER_CLASS

Answer 3

包仅适用于每个github存储库的react 15。原型的处理方式已在16中更改

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：无法读取未定义的属性'number''

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及更高版本。这对我有用。