Question

我正在使用https://github.com/kriasoft/react-starter-kit并收到这些警告：

Warning: WithContext(...): React component classes must extend React.Component.
Warning: WithStyles(...): React component classes must extend React.Component.

这些文件看起来像：

// withContext.js

import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars
import emptyFunction from 'fbjs/lib/emptyFunction';

function withContext(ComposedComponent) {
  return class WithContext {

    static propTypes = {
      context: PropTypes.shape({
        onInsertCss: PropTypes.func,
        onSetTitle: PropTypes.func,
        onSetMeta: PropTypes.func,
        onPageNotFound: PropTypes.func
      })
    };

    static childContextTypes = {
      onInsertCss: PropTypes.func.isRequired,
      onSetTitle: PropTypes.func.isRequired,
      onSetMeta: PropTypes.func.isRequired,
      onPageNotFound: PropTypes.func.isRequired
    };

    getChildContext() {
      let context = this.props.context;
      return {
        onInsertCss: context.onInsertCss || emptyFunction,
        onSetTitle: context.onSetTitle || emptyFunction,
        onSetMeta: context.onSetMeta || emptyFunction,
        onPageNotFound: context.onPageNotFound || emptyFunction
      };
    }

    render() {
      let { context, ...other } = this.props; // eslint-disable-line no-unused-vars
      return <ComposedComponent {...other} />;
    }

  };
}

export default withContext;

// withStyles.js

import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars
import invariant from 'fbjs/lib/invariant';
import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';

let count = 0;

function withStyles(styles) {

  return (ComposedComponent) => class WithStyles {

static contextTypes = {
  onInsertCss: PropTypes.func
};

constructor() {
  this.refCount = 0;
  ComposedComponent.prototype.renderCss = function (css) {
    let style;
    if (canUseDOM) {
      if (this.styleId && (style = document.getElementById(this.styleId))) {
        if ('textContent' in style) {
          style.textContent = css;
        } else {
          style.styleSheet.cssText = css;
        }
      } else {
        this.styleId = `dynamic-css-${count++}`;
        style = document.createElement('style');
        style.setAttribute('id', this.styleId);
        style.setAttribute('type', 'text/css');

        if ('textContent' in style) {
          style.textContent = css;
        } else {
          style.styleSheet.cssText = css;
        }

        document.getElementsByTagName('head')[0].appendChild(style);
        this.refCount++;
      }
    } else {
      this.context.onInsertCss(css);
    }
  }.bind(this);
}

componentWillMount() {
  if (canUseDOM) {
    invariant(styles.use, `The style-loader must be configured with reference-counted API.`);
    styles.use();
  } else {
    this.context.onInsertCss(styles.toString());
  }
}

componentWillUnmount() {
  styles.unuse();
  if (this.styleId) {
    this.refCount--;
    if (this.refCount < 1) {
      let style = document.getElementById(this.styleId);
      if (style) {
        style.parentNode.removeChild(style);
      }
    }
  }
}

render() {
  return <ComposedComponent {...this.props} />;
}



};
}

export default withStyles;

我对React和ES6语法完全不熟悉，所以我不知道如何解决这个问题。有帮助吗？我从React 0.13切换到0.14beta之后开始收到这些警告但无法弄清楚导致它的原因。感谢

Answer 1

从React v0.14开始，不推荐使用不带扩展React.Component的ES6类实现的组件。他们应该延长React.Component（就像警告所说的那样）：

class Component extends React.Component { }

来自o fficial blog post：

ES6组件类现在必须扩展React.Component以启用无状态函数组件。 ES3 module pattern将继续有效。

Answer 2

基本模式是这个;

    import React, {Component} from 'react';

    var AppCtrlSty = {
        height: '100%',
        padding: '0 10px 0 0'
    }

    class AppCtrlRender extends Component {
        render() {
            return (
                <div id='AppCtrlSty' style={AppCtrlSty}>
                    React 1.3 Basic with browserify and babel
                </div>
            );
        }
    }

    export default class AppCtrl extends AppCtrlRender {}

来自https://github.com/calitek/ReactPatterns。

获得警告：React组件类必须扩展React.Component。在React上

2 个答案: