ES6 重写父方法答案

【问题标题】：ES6 override parent methodES6 重写父方法
【发布时间】：2016-05-30 19:13:33
【问题描述】：

我目前正在自定义一个 react nuka-carousel https://github.com/kenwheeler/nuka-carousel。我想覆盖 carousel.js 中的 getDecoratorStyles 方法。该类如下所示：

const Carousel = React.createClass({
...
  render() {
  ...
            return (
              <div
                style={assign(self.getDecoratorStyles(Decorator.position), Decorator.style || {})}
                className={'slider-decorator-' + index}
                key={index}>
                <Decorator.component
...
  getDecoratorStyles(position) {
    switch (position) {
      case 'TopLeft': {
        return {
          position: 'absolute',
          top: 0,
          left: 0
        }
 ...

我试图扩展类并覆盖方法，但它似乎没有效果:(

...
import NukaCarousel from 'nuka-carousel';
...
class MXCarousel extends NukaCarousel {
    getDecoratorStyles(position) {
        switch (position) {
        case 'CenterLeft':
            return {
                position: 'absolute',
                top: 1000,
                left: 0,
                transform: 'translateY(-50%)',
                WebkitTransform: 'translateY(-50%)'
            };
        case 'CenterRight':
            return {
                position: 'absolute',
                top: 990,
                right: 0,
                transform: 'translateY(-50%)',
                WebkitTransform: 'translateY(-50%)'
            };
        default:
            return super.getDecoratorStyles(position);
        }
    }
}

export default class Carousel extends React.Component {
    render() {
        const sliderSettings =
        { cellSpacing: 30, slidesToShow: 6, slideWidth: '100px' };

        return (
            <MXCarousel decorators = {decorators} {...sliderSettings} className="component-carousel">
...

我对 es6 的理解有误吗？在父类中调用时方法没有被覆盖吗？

【问题讨论】：

它应该可以工作。确保您正在处理您真正想要的类的实例。此外，如果您使用的是转译器，请确保它们完全支持您的需求，尽管我希望覆盖已经在列表中......
它不起作用 :( 我们使用 webpack 和 babel，但我在配置这些东西和其他东西工作方面很糟糕
你传递给MXCarousel的道具的decorators变量是什么？
我有 prev 和 next 按钮的装饰器，类似于默认装饰器
是CenterRight和CenterLeft位置的装饰器吗？

标签： javascript reactjs ecmascript-6

【解决方案1】：

我想问题是您传递给轮播道具的decorators 变量可能会覆盖getDecoratorStyles 方法中的样式。在Carousel 类中传递给道具的装饰器被映射到render 方法中的元素。特别注意将样式分配给元素的行：

style={assign(self.getDecoratorStyles(Decorator.position), Decorator.style || {})}

结果是，如果相关装饰器包含自己的样式，则可以覆盖getDecoratorStyles 方法生成的样式。

【讨论】：

如果这不能解决问题，请检查您的decorators并将其附加到答案中