擴展反應組件的問題/問題

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) 
     }, 
    }