Question

我想将此包用于React：https://github.com/naikus/svg-gauge

React的示例正在使用CreateReactClass，请参阅下文：

我需要这个吗？他们为什么要用这个？文档没有提到使用CreateReactClass背后的原因。你能用这个包没有CreateReactClass吗？

import React from "react";
import CreateReactClass from "create-react-class";
import Gauge from "svg-gauge";

const defaultOptions = {
  animDuration: 1,
  showValue: true,
  max: 100
  // Put any other defaults you want. e.g. dialStartAngle, dialEndAngle, radius, etc.
};

const Component = CreateReactClass({
  displayName: "Gauge",
  componentDidMount() {
    this.renderGauge(this.props);
  },

  shouldComponentUpdate(nextProps, nextState) {
    const {props} = this;
    if(props.value !== nextProps.value) {
      this.renderGauge(nextProps);
    }
    return false;
  },

  render() {
    return (
      <div className="gauge-container" ref={el => this.gaugeEl = el}></div>
    );
  },

  renderGauge(props) {
    const gaugeOptions = Object.assign({}, defaultOptions, props);
    if(!this.gauge) {
      this.gauge = Gauge(this.gaugeEl, gaugeOptions);
    }else {
      this.gauge.setValueAnimated(props.value, gaugeOptions.animDuration);
    }
  }
});

Answer 1

最初，React.createClass是您声明组件的唯一方式。稍后添加了类组件和功能无状态组件。随着React 16的发布，React.createClass被删除了，但它被移动到单独的create-react-class包，以便在依赖React.createClass的代码库上更容易升级。您可以阅读有关React.createClass here

的弃用的更多信息

因此该项目的示例仅使用create-react-class包，但您应该能够使用类组件。

Answer 2

如果您不想在项目中使用ES6，则可以使用createReactClass，因为Class关键字是ES6规范。您可以在React doc

中阅读更多内容

为什么要使用React CreateReactClass？

2 个答案: