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中的抽象

回答

相关问题