react-responsive-accordion-> getting "Uncaught TypeError : 'number'of undefined '속성을 읽을 수 없습니다.

Question

저는'반응 반응 형 아코디언 '을 사용하여 js에 반응하고 간단한 반응 앱을 생성하여 아코디언을 표시하는 새로운 기능입니다.

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 그렇게 할 수있는 링크 'https://www.npmjs.com/package/react-responsive-accordion'을 따라,하지만 난 오류 아래

아래에 무엇입니까 코드입니다 수업 :

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

ReactDOM.render(<App />, document.getElementById('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

Accordion은 이 data-trigger 인 어린이 배열이 https://github.com/glennflanagan/react-responsive-accordion/blob/master/src/Accordion.js#L15에 해당합니다.

올바른 자식 소품을 제공하기 위해 render 메소드를 이와 같이 수정하십시오. 또는 다른 패키지에이 같은 문제에 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, 

이는 PropType을 처리하는 방법이 변경 되었기 때문에 발생합니다. 분명히을 처리하는 기존의 방법은 버전 16에서 제거되었습니다 당신은 더 많은 읽을 수 있습니다 여기에 : 내가 생각할 수있는 https://reactjs.org/docs/typechecking-with-proptypes.html

그리고 가능한 해결책 :

• 를 사용하여 반응의 이전 버전 (15.6를 같은 .1 Nandu Kalidindi에 의해 주어진 예제에서).

• 이 모듈은 I 반응 응답-아코디언 'App.jsx에서'로부터 수입 아코디언 'import 문을 제거하면이 .. 문제를 해결하지 않는