无法实现ZingChart-React

我被这些代码困住了，

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 starter kit - https://github.com/davezuko/react-redux-starter-kit，我得到这个错误，请帮助我。

错误:无法读取未定义的属性'__reactAutoBindMap'

这是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'));

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

工作示例

相关内容

最新更新

热门标签：