扩展反应组件的问题/问题

Question

我在我的反应应用程序中使用open source scrollbar component。

import PropTypes from "prop-types"; 
import Scrollbars from "react-custom-scrollbars"; 

// This component extends react-custom-scrollbars and allows 
// the developer to force an update of the scrollbars 
// every 'X' ms. 

class ForcedScrollbars extends Scrollbars { 

    componentDidMount() { 
     this.rerenderTimer = setInterval(() => { 
      this.update(); 
     }, this.props.forceRerenderTimer); 
    } 

    componentWillUnmount() { 
     clearInterval(this.rerenderTimer); 

    } 
} 

ForcedScrollbars.propTypes = { 
    forceRerenderTimer: PropTypes.number 
}; 

export default ForcedScrollbars; 

我有两个问题：

，使其看起来像这样我已经延长了组件。

1. 在父组件Scrollbars的componentDidMount方法是这样的：

   componentDidMount() { 
       this.addListeners(); 
       this.update(); 
       this.componentDidMountUniversal(); 
   } 
   

在我ForcedScrollbars组件将同样的方法被调用在ForcedScrollbarscomponentDidMount来电或我打电话他们再次明确？即

class ForcedScrollbars extends Scrollbars { 

    componentDidMount() { 
     this.addListeners(); 
     this.update(); 
     this.componentDidMountUniversal(); 
     this.rerenderTimer = setInterval(() => { 
      this.update(); 
     }, this.props.forceRerenderTimer); 
    } 

    // REST OF COMPONENT // 

我看到的误差在控制台

警告：标签未知丙forceRerenderTimer。从元素中删除这个 道具。有关详细信息，请参阅...（脸书链接）...

正如你可以在我的代码中看到上面我有以下看起来不工作。

ForcedScrollbars.propTypes = { 
    forceRerenderTimer: PropTypes.number 
}; 

此外，我试过哪些也没有出现工作。

Scrollbars.propTypes = { 
    forceRerenderTimer: PropTypes.number 
}; 

检查codesandbox在这里。

Answer 1

尝试，如果你不使用object-rest-spread

ForcedScrollbars.propTypes = Object.assign(
    {}, 
    Scrollbars.propTypes, 
    { forceRerenderTimer: PropTypes.number } 
) 

更新

Scrollbars简单地转储所有它“不知道性能，延长Scrollbars物业类型

ForcedScrollbars.propTypes = { 
    ...Scrollbars.propTypes, 
    forceRerenderTimer: PropTypes.number 
} 

或者“到指定的根标签code。因此，您添加到扩展组件的每个属性都将被添加到指定的tagName。

你这里有以下选项：

1. 问react-custom-scrollbars维护者实现更智能的道具过滤系统。说购买使用propTypes。
2. 通过提供一个省略forceRerenderTimer属性的自定义无状态组件来做一些hackery。 Demo（unknowProp仅用于完整性检查）。

代码

class ForcedScrollbars extends Scrollbars { 
    static propTypes = { 
     ...Scrollbars.propTypes, 
     forceRerenderTimer: PropTypes.number, 
     // allow components as root 
     tagName: PropTypes.oneOfType([ 
     PropTypes.string, 
     PropTypes.func 
     ]) 
    }; 

    static defaultProps = { 
     ...Scrollbars.defaultProps, 
     // omit forceRerenderTimer 
     tagName: allProps => { 
     const { 
      forceRerenderTimer, 
      ...props, 
     } = allProps 

     return createElement('div', props) 
     }, 
    }