Question

在他们的演示之后，我试图将gitgrapqh导入到React中，但是我遇到了一个错误，显然是在稍后加载的一小部分时间后引发了错误。

App.js文件

import React, { Component } from 'react';
import 'gitgraph.js';
import 'gitgraph.js/build/gitgraph.css';

export default class Gitgraph extends Component {
  constructor(props) {
    super(props);
    this.$gitgraph = React.createRef();
  }

  componentDidMount() {

    const gitgraph = new GitGraph({ canvas: this.$gitgraph.current });

    const master = gitgraph
      .branch("master")
      .commit()
      .commit();

    gitgraph
      .branch("dev")
      .commit()
      .commit()
      .merge(master);
  }

  render() {
    return <canvas ref={this.$gitgraph} />;
  }
}

但是我遇到了这个错误。

Failed to compile
./src/App.js
Line 13:  'GitGraph' is not defined  no-undef
Search for the keywords to learn more about each error.

有人可以帮助我。

Answer 1

在React项目（实际上在所有现代JavaScript项目中）中，您将代码拆分为多个JavaScript 文件-所谓的模块。您这样做是为了保持每个文件/模块的重点和可管理性。

要仍然访问另一个文件中的功能，您需要export（使其可用）和import（以获得访问）语句。

您有两种不同类型的出口：default（未命名）和named出口：

 default => export default ...;
 named => export const someData = ...;

示例＃01：

#Person.js 
const person = { name: "firstName" }'
export default person;

现在您应该使用import Person from 'Person'

示例＃02：

#clean.js
 export const clean = () => ...}

然后您应该使用import { clean } from 'clean'

默认导出：

import person from './person';
import prs from './person';

已命名出口：

import { smth } from './utility';
import { smth as Smth } from './utility';
import * as bundled from './utility';

如何正确导入js库（gigraph）到react

1 个答案: