Reactstrap Kartenkomponente wirft Fehler

Question

Das Problem mit den reactstrap Karten ist: https://reactstrap.github.io/components/card/

Mit reactstrap Komponenten wie Karte, etc. funktioniert nicht.

Komponente: Version I

import React, { Component } from 'react'; 
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'reactstrap'; 

class MoviesIndex extends Component { 

    render() { 
     return (
      <CardDeck> 
       <Card> 
        <CardImg top width="100%" src="" alt="Movie Poster" /> 
       </Card> 
      </CardDeck> 
     ); 
    } 
} 

export default MoviesIndex; 

Ausgang: * Es funktioniert ohne Fehler.

Aber wenn ich versuche, den Rest der Komponenten von reactstrap zu verwenden. Es wirft Fehler auf der Konsole auf.

Komponente: Version II

import React, { Component } from 'react'; 
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'reactstrap'; 

class MoviesIndex extends Component { 

    render() { 
     return (
      <CardDeck> 
       <Card> 
        <CardImg top width="100%" src="" alt="Movie Poster" /> 
        <CardBody> 
         <CardTitle>Card title</CardTitle> 
         <CardSubtitle>Card subtitle</CardSubtitle> 
         <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText> 
         <Button>Button</Button> 
        </CardBody> 
       </Card> 
      </CardDeck> 
     ); 
    } 
} 

export default MoviesIndex; 

Ausgang:

---

package.json

{ 
    "name": "client", 
    "version": "1.0.0", 
    "main": "index.js", 
    "scripts": { 
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js", 
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test", 
    "test:watch": "npm run test -- --watch" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.2.1", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-react": "^6.1.18", 
    "chai": "^3.5.0", 
    "chai-jquery": "^2.0.0", 
    "jquery": "^2.2.1", 
    "jsdom": "^8.1.0", 
    "mocha": "^2.4.5", 
    "react-addons-test-utils": "^0.14.7", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0" 
    }, 
    "dependencies": { 
    "axios": "^0.17.1", 
    "babel-preset-stage-1": "^6.1.18", 
    "lodash": "^3.10.1", 
    "react": "^16.2.0", 
    "react-dom": "^16.2.0", 
    "react-redux": "^5.0.6", 
    "react-router": "^4.2.0", 
    "react-transition-group": "^2.2.1", 
    "reactstrap": "^4.8.0", 
    "redux": "^3.7.2", 
    "redux-promise": "^0.5.3" 
    } 
} 

Ich bin nicht in der Lage, dieses Problem zu debuggen. Bitte helfen Sie! TIA. hier

Answer 1

Dieses wie ein Tippfehler aussieht:

renderMovies() { 
     return _.map(this.props.movies, movie => { 

Fehlende )

_.map(this.props.movies, movie) => { 

Versuchen Sie, ob es das nicht tut, setzen console.log() nach allem, was zu sehen, wo es undefined wird .

Diese Art von Fehler in der Regel von etwas führt nicht richtig oder etwas exportiert wird null/undefined aufgrund fehlenden Daten etc.

Dies ist eine gute Gelegenheit für mich, mit ES Lint zu empfehlen, so können Sie gewinnen Zusätzliche Hilfe 24/7 durch die passive Anzeige von Fehlern. Überprüfen Sie es, wenn Sie es nicht verwenden. Es lohnt sich, es zu betrachten und zu benutzen.

Ich werde hier keine spezifischen Linting-Konfigurationen empfehlen. Das ist außerhalb der Reichweite dieser Hilfe. ES Lint wird Code-Fehler wie die fehlende ) mit einer roten Unterstreichung unterstreichen, so dass Sie weniger von dieser Art von Ding erleben werden :)

Answer 2

Die Komponenten wie CardBody usw. sind nicht in v4.8.0 verfügbar.

Das Upgrade auf die neueste Version (reactstrap v5.0.0-alpha.4) behebt dieses Problem!

npm install --save reactstrap@5.0.0-alpha.4

auf die Frage finden, dass ich für weitere Details über reactstrap @ Github erstellt: https://github.com/reactstrap/reactstrap/issues/730