无法实现 ZingChart-React答案

【问题标题】：Unable to implement ZingChart-React无法实现 ZingChart-React
【发布时间】：2016-09-05 10:47:39
【问题描述】：

我被这些代码卡住了，

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，我收到此错误，请帮助我。

错误：无法读取未定义的属性“__reactAutoBindMap”

【问题讨论】：

你是通过 ReactDOM.render() 渲染你的组件吗？
我严格使用 es6。

标签： reactjs charts ecmascript-6 zingchart

【解决方案1】：

这是编写组件的 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'));

【讨论】：

我收到错误 registerComponent(...): Target container is not a DOM element.
在你的 HTML 文件中，你应该有一个
。你有吗？

【解决方案2】：

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

【讨论】：

它不起作用，我之前尝试过。 ReactClass.js:842 未捕获类型错误：无法读取未定义的属性“__reactAutoBindMap”
正如您在工作示例中所见，这是正确的做法。您收到的错误消息可能与 ReactDOM.render() 有关，但这可能是另一个问题。
我严格使用 es6 并且不推荐使用 ReactDOM.render()。
你确定你使用的是ReactDOM.render()吗？因为它没有被弃用。 facebook.github.io/react/docs/top-level-api.html#reactdom
我从来没有用过这个你能提供我使用 React.DOM.render() 的代码吗？