Question

我有以下React组件：

import React from "react";
import styled from "styled-components";
import Gauge from "./libs/svg-gauge";

const Container = styled.div``;

class MyGauge extends React.Component {
  componentDidMount = () => {
    this.renderGauge(this.props);
  };

  renderGauge = () => {
    // HERE is the issue - Gauge is not defined
    console.log(Gauge);
    if (!this.gauge) {
      this.gauge = Gauge(this.gaugeEl, {});
    }
  };

  render() {
    return (
      <Container>
        <RatingGaugeItem
          ref={el => {
            this.gaugeEl = el;
          }}
        />
      </Container>
    );
  }
}

export default MyGauge;

此文件import Gauge from "./libs/svg-gauge";的位置：https://github.com/naikus/svg-gauge/blob/master/src/gauge.js

将故事书更新为"@storybook/react": "5.1.7",之后，我遇到的问题是，尽管这在我的React Web应用程序中可以正常工作，但在故事书中，我遇到了以下错误：

Object(...) is not a function

这是因为未定义量规。请注意console.log(Gauge); ---未找到仪表。是我错误地导入了gauge.js文件，还是我需要更新gauge.js文件以导出版本，以在全球范围内填充仪表？

给定全局JavaScript函数，如何导出到React组件？

0 个答案: