獲取警告：React組件類必須擴展React.Component。上反應

我使用https://github.com/kriasoft/react-starter-kit和我得到這些警告：獲取警告：React組件類必須擴展React.Component。上反應

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後，我開始收到這些警告，但無法弄清楚是什麼導致了它。謝謝

來源

2015-09-12 hilarl

請告訴我，你沒有真正分配在構造函數的原型方法？ – Bergi

也許只是'class ... extends React.Component'？ – Bergi

我試過這種方式，但結束了另一個錯誤 – hilarl

從React v0.14開始，實現爲ES6類的組件沒有延伸React.Component已棄用。他們應該延長React.Component（就像警告說）：

class Component extends React.Component { 

}

從鄰fficial blog post：

ES6 component classes must now extend React.Component in order to enable stateless function components. The ES3 module pattern will continue to work.

來源

2015-09-12 19:54:23

謝謝，我今天更新到v0.14beta3，所以有些困惑。 – hilarl

基本模式是這樣的;

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。

來源

2015-09-12 18:08:22

獲取警告：React組件類必須擴展React.Component。上反應

回答

相關問題