2016-12-02 1 views
0

Я хотел бы иметь круговой индикатор выполнения в моем проекте response.js. После kimmobrunfeldt's react-progressbar.js installation notes мне удалось включить указанную библиотеку в мой проект. Однако, по какой-то причине, неизвестной мне, фактический индикатор выполнения не отображает. Инспектор DOM указывает, что существует оболочка индикатора выполнения, но не ее содержимое. Ошибок не возникает при создании с npm.content-progressbar.js контент не отображается в проекте реакции

Вот моя установка react.js проекта:

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 


var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 
    module.exports = { 
    entry: [ APP_DIR + '/index.jsx'], 
    output: { path: BUILD_DIR, filename: 'bundle.js'}, 
    module: { 
    loaders: [ 
     { test: /\.jsx?/, include : APP_DIR, loader: 'babel'}, 
     { test: /\.css$/, loader: "style-loader!css-loader" } 
    ] 
    } 
} 

package.json

{ 
    "name": "hello-react", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "babel": { 
    "presets": [ 
     "es2015", 
     "react" 
    ] 
    }, 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "dev": "./node_modules/.bin/webpack -d --watch" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-loader": "^6.2.8", 
    "json-loader": "^0.5.4", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "react-progressbar.js": "^0.2.0", 
    "webpack": "^1.13.3" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.4.5", 
    "babel-loader": "^6.2.8", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.16.0", 
    "css-loader": "^0.26.1", 
    "react": "^0.14.8", 
    "webpack": "^1.13.3", 
    "webpack-dev-server": "^1.16.2", 
    "webpack-loader-modules": "^1.1.0" 
    } 
} 

index.jsx

import React from 'react'; 
import {render} from 'react-dom'; 
import progressBar from 'react-progressbar.js'; 

// ... 

// ... 
var Circle = progressBar.Circle; 

class App extends React.Component { 
    render() { 
    return (

     <div> 
     <p> Hello React!</p> 

     <Circle 
      progress={1} 
      text={'test'} 
      initialAnimate= {true} 
      containerClassName= {'progressbar-container'} 
      /> 
     </div> 

    ); 
    } 
} 

// ... 


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

я тогда получить модуль не найдена ошибка в. Я не думаю, что это вопрос неправильных путей, поскольку проект сам по себе просто отлично. – gnzg

+0

Вы можете предоставить полное сообщение об ошибке? – Mikhail

+0

Несомненно. Если я не укажу суффикс, это то, что я получаю: ERROR in ./src/client/app/index.jsx Модуль не найден: Ошибка: не удается разрешить модуль «progress-progressbar» в/Users/UserX/Desktop/response-hello-world/src/client/app @ ./src/client/app/index.jsx 11: 24-52 – gnzg

ответ

0

В соответствии с документацией должно начинаться имя containerClassName.

<Circle 
      progress={this.state.progress} 
      text={'test'} 
      options={options} 
      initialAnimate={true} 
      containerStyle={containerStyle} 
      containerClassName={'.progressbar'} 
/> 

Источник: https://github.com/kimmobrunfeldt/react-progressbar.js/tree/master

Кроме того, я понятия не имею, ...

+0

Это правда, однако я сознательно оставил некоторые аргументы из-за того, что в противном случае вся DOM не отображает ... Примечательно, что даже тогда нет сообщения об ошибках от npm ... – gnzg

Смежные вопросы