React.js中的抽象

我想在創建React組件時使用一些抽象。例如：React.js中的抽象

class AbstractButton extends React.Component { 
    render() { 
    return (
     <button 
     onClick={this.props.onClick} 
     className={this.definitions.className}> 
     {this.props.text} 
     </button> 
    } 
} 
class PrimaryButton extends AbstractButton { 
    constructor(options) { 
    super(options); 
    this.definitions = { 
     className: 'btn btn-primary' 
    }; 
    } 
} 
class SuccessButton extends AbstractButton { 
    constructor(options) { 
    super(options); 
    this.definitions = { 
     className: 'btn btn-success' 
    }; 
    } 
}

我不想通過props通過這些definitions，因爲我知道，這些definitions --in這種情況下，class --Will永遠不會改變。

它是React中的反模式嗎？還是可以嗎？

我的問題是指this altjs issue：這種抽象與@connectToStores不兼容。

來源

2015-11-24 mqklin

React傾向於關注構圖而不是繼承，但是你的代碼對我來說並不邪惡。 – christopher

是的，它通常被認爲是反模式。這裏有一篇有趣的文章：https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night- 9af8de78ccb4 –

一般來說，沒有理由不能在這裏使用的，而不是深繼承組成：

class Button extends React.Component { 
    render() { 
    return (<button 
      onClick={this.props.onClick} 
      className={this.props.className} 
      > 
      {this.props.text} 
      </button>); 
    } 
    static propTypes = { 
     className: React.PropTypes.string.isRequired, 
     onClick: React.PropTypes.func 
    } 
} 

class PrimaryButton extends React.Component { 
    render() { 
    return <Button {...this.props} className="btn btn-primary" />; 
    } 
}

這是一樣的功能，你提出了什麼，而是簡單了很多，更容易推理。它很清楚你的Button實際需要做什麼工作。

一旦你做出這個飛躍，可以完全消除類和使用無狀態的組件：

const Button = (props) => (<button 
      onClick={props.onClick} 
      className={props.className} 
      > 
      {props.text} 
      </button>); 
Button.propTypes = { 
     className: React.PropTypes.string.isRequired, 
     onClick: React.PropTypes.func 
}; 

const PrimaryButton = (props) => 
    <Button {...props} className="btn btn-primary" />; 

const SuccessButton = (props) => 
    <Button {...props} className="btn btn-success" />;

這將使反應，申請更多的優化，因爲您的組件不需要任何特殊的生命活動的支持和狀態管理。從現在開始，你只需要使用純函數就可以更容易推理。另外，如果您試圖製作一些包裝Bootstrap的React組件，那麼也許您應該查看一下React-Bootstrap。

來源

2015-11-24 15:38:17 Brandon

React.js中的抽象

回答

相關問題