react-responsive-accordion-> getting "Uncaught TypeError：プロパティ 'number'が未定義です。

Question

jsに反応し、 'react-responsive-accordion'を使用してアコーディオンを表示する簡単な反応アプリを作成するのが新しいです。そうするために、リンク '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

アコーディオンは、this.props.childrenとdata-triggerの子配列を期待しています。これはhttps://github.com/glennflanagan/react-responsive-accordion/blob/master/src/Accordion.js#L15です。

レンダリングメソッドをこのようなものに変更して、有効な子プロップを提供します。あるいは、この実施例をチェックアウト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 2

別のパッケージにこの同じ問題に遭遇し、今反応ダウングレードすることを決めました。この問題は、Reactの変更によって引き起こされたようです。

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

PropTypesを処理する方法が変更されたため、この問題が発生した：あなたがコードに深く見れば、それは実際に文句を言います。どうやらそれらを処理するための古い方法は、あなたがここを読むことができ、バージョン16で削除されました：私は考えることができるhttps://reactjs.org/docs/typechecking-with-proptypes.html

と可能な解決策：

• 15.6のような（反応の古いバージョンを使用します.1 Nandu Kalidindiによって与えられた例では）。

• モジュールは、この問題を解決していません