Question

我无法在svg元素内呈现VictoryGroup元素。注意：我正在使用电子，对于其他所有页面都可以正常工作。我呈现网页的方式是正常启动服务器（webpack），然后将其提供给Electron。我将其设置为在浏览器中加载，然后在电子中加载。浏览器会很好地加载图形，但是电子不会加载任何东西。

图形概述

import VictoryGroupChart from './VictoryGroupChart';

class Graph extends Component {
    <svg>
        <g>
            <VictoryGroupChart />
        </g>
    </svg>
}
export default Graph;

VictoryGroupChart概述

import VictoryGroup from 'victory-group';

class VictoryGroupChart extends Component {
    render() {
        return (
            <VictoryGroup />
        )
    }
}
export default VictoryGroupChart;

每当我运行“ yarn dev” 我收到以下错误：

警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了导出定义文件中的组件，否则您可能混淆了默认导入和命名导入。

和

未捕获的错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记了从中导出组件定义的文件，或者您可能混淆了默认文件并命名为进口。

这是我的index.js，我已经测试了链接在不呈现图形的情况下可以正常工作

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/login" component={Login} />
      </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app'),
);

如果package.json有用...

{
  "name": "harvest-desktop",
  "description": "Harvest Profit's first desktop app",
  "productName": "Harvest Profit",
  "copyright": "Copyright © 2018 Harvest Profit",
  "version": "0.0.1",
  "license": "UNLICENSED",
  "homepage": "https://www.harvestprofit.com",
  "author": {
    "name": "Jaryd Krishnan",
    "email": "jaryd@harvestprofit.com"
  },
  "build": {
    "appId": "com.harvest.app",
    "mac": {
      "category": "public.app-category.business",
      "icon": "static/icon.png"
    },
    "win": {
      "icon": "static/icon.png"
    }
  },
  "scripts": {
    "dev": "electron-webpack dev",
    "compile": "electron-webpack",
    "dist": "yarn compile && electron-builder",
    "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null",
    "test": "jest"
  },
  "dependencies": {
    "@harvest-profit/calculations": "^1.1.0",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.1",
    "connected-react-router": "^4.3.0",
    "electron-devtools-installer": "^2.2.4",
    "electron-store": "^2.0.0",
    "history": "^4.7.2",
    "jquery": "^3.3.1",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "popper.js": "^1.14.3",
    "prop-types": "^15.6.1",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-hot-loader": "^4.2.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.8",
    "reactstrap": "^6.0.1",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.2",
    "redux-saga": "^1.0.0-beta.1",
    "redux-thunk": "^2.3.0",
    "source-map-support": "^0.5.6",
    "victory-area": "^30.2.0",
    "victory-chart": "^30.1.0",
    "victory-group": "^30.1.0",
    "victory-line": "^30.2.0",
    "victory-scatter": "^30.2.0",
    "victory-tooltip": "^30.1.0"
  },
  "devDependencies": {
    "@babel/core": "7.0.0-beta.49",
    "@babel/preset-env": "^7.0.0-beta.49",
    "@babel/preset-react": "^7.0.0-beta.49",
    "babel-eslint": "^7.2.3",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.0.0-beta",
    "babel-polyfill": "^6.26.0",
    "electron": "2.0.2",
    "electron-builder": "^20.15.1",
    "electron-webpack": "^2.1.2",
    "electron-webpack-eslint": "^2.1.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.4",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.8.2",
    "jest": "^23.4.2",
    "jest-environment-jsdom": "^23.4.0",
    "node-sass": "^4.9.0",
    "react-test-renderer": "^16.4.2",
    "sass-loader": "^7.0.1",
    "webpack": "^4.8.3"
  },
  "resolutions": {
    "webpack-sources": "1.1.0"
  }
}

SVG <g>内部呈现的VictoryGroup导致错误

0 个答案: