Question

我目前正在定制反应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理解中是否有错误？是在父类中调用时不被覆盖的方法吗？

Answer 1

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

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

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

ES6覆盖父方法

1 个答案: