无法实现 ZingChart-React

Question

我受困于这些代码，

index.html

<!doctype html>
<html lang="en">
<head>
<title>React Redux Starter Kit</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
 <div id="root" style="height: 100%"></div>
 <div id="demo"></div>
 </body>
 </html>

Counter.js

import React from 'react'
import {core as Core} from 'zingchart-react'

export const Counter = React.createClass({
render () {
var myConfig = {
       type: "bar",
       series : [
               {
                values : [35,42,67,89,25,34,67,85,90.99]
                }
                 ]
};
return(
<div>Hello
<Core id="myChart" height="300" width="600" data={myConfig} />
</div>
   )
  }
  })
 export default Counter

main.js

import React from 'react'
import ReactDOM from 'react-dom'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { useRouterHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import createStore from './store/createStore'
import AppContainer from './containers/AppContainer'
import Counter from './components/Counter/Counter'


ReactDOM.render(<Counter/>, document.querySelector('#demo'));

 // ========================================================
// Browser History Setup
// ========================================================
const browserHistory = useRouterHistory(createBrowserHistory)({
 basename: __BASENAME__
 })

// ========================================================
// Store and History Instantiation
// ========================================================  

const initialState = window.___INITIAL_STATE__
const store = createStore(initialState, browserHistory)
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: (state) => state.router
 })

if (__DEBUG__) {
  if (window.devToolsExtension) {
    window.devToolsExtension.open()
  }
}
const MOUNT_NODE = document.getElementById('root')

 let render = (routerKey = null) => {
 const routes = require('./routes/index').default(store)

  ReactDOM.render(
    <AppContainer
      store={store}
       history={history}
       routes={routes}
       routerKey={routerKey}
      />,
   MOUNT_NODE
   )
     }

 if (__DEV__ && module.hot) {
 const renderApp = render
  const renderError = (error) => {
   const RedBox = require('redbox-react')

   ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
   }
 render = () => {
  try {
    renderApp(Math.random())
   } catch (error) {
   renderError(error)
  }
   }
   module.hot.accept(['./routes/index'], () => render())
  }
   render()

我正在使用 react-redux 初学者工具包 - https://github.com/davezuko/react-redux-starter-kit，我遇到了这个错误，请帮助我。

ERROR: Cannot read property '__reactAutoBindMap' of undefined

Answer 1

core 不是 React 组件的有效名称。 React 组件必须以大写字母开头，这就是 React 区分组件和 HTML 标签的方式。

所以你的代码应该是这样的

import React from 'react'
import {core as Core} from 'zingchart-react'

export const Counter = React.createClass({
       render () {
         var myConfig = {
           type: "bar",
           series : [
                      {
                        values : [35,42,67,89,25,34,67,85]
                      }
           ]
         };
         return (
          <div>Hello
            <Core id="myChart" height="300" width="600" data={myConfig} />
          </div>
         )
      }
})
export default Counter

working example

Answer 2

这是编写组件的 es6 方式：

import React from 'react';
import {core as Core} from 'zingchart-react';

class Counter extends React.Component {
       render () {
         var myConfig = {
           type: "bar",
           series : [
                      {
                        values : [35,42,67,89,25,34,67,85]
                      }
           ]
         };

         return (
          <div>Hello
            <Core id="myChart" height="300" width="600" data={myConfig} />
          </div>
         )
      }
}

export default Counter;

并渲染它，

ReactDOM.render(<Counter />, document.getElementById('some_div'));

无法实现 ZingChart-React

Unable to implement ZingChart-React

charts

ecmascript-6

reactjs

zingchart