Javascript 扩展react组件的问题/问题

我正在我的react应用程序中使用

我扩展了组件，使其看起来像这样：

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;

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

我有两个问题

父组件滚动条中的

componentDidMount

方法如下所示：

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;

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

在我的

ForcedScrollbars

组件中，会在

ForcedScrollbars

componentDidMount

调用中调用相同的方法吗？还是我必须再次显式调用它们？i、 e

class ForcedScrollbars extends Scrollbars {

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

  // REST OF COMPONENT //

我在控制台中看到一个错误

警告：标签上的未知支撑力重新渲染器。去掉这个 来自元素的道具。有关详细信息，请参阅…（facebook链接）

正如你在我上面的代码中所看到的，我有以下似乎不起作用的代码

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

我也试过，但似乎也不起作用

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

---

检查此处。

尝试扩展

滚动条

属性类型

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

或者，如果您没有使用

对象静止排列

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

更新

滚动条

只是将它“不知道”的所有属性转储到指定的根标记。因此，添加到扩展组件的每个属性都将添加到指定的

标记名中

您在此处有以下选项：

要求
react自定义滚动条
维护人员实施更智能的道具过滤系统。使用
propTypes
说购买
通过提供一个省略
forceRerenderTimer
属性的自定义无状态组件进行黑客攻击。（
unknowProp
添加只是为了进行健全性检查）
代码

通过调用
super（props）
添加
constructor
。是的，这似乎不起作用。这可能与父组件的工作方式有关-如果您检查render方法，我确信它向我显示了相同的错误，直到我还将
forcerrendertimer
添加到const
{forcerrendertimer}=this.props@PaulFitzgerald你能提供一个小提琴来演示这个问题吗。这应该有用由于某种原因，这里没有显示错误，即使没有任何道具类型检查。@PaulFitzgerald检查此解决方法。BTW考虑使用作文比继承。欢呼的答案，和良好的呼喊，看看组成比继承！现在就看上面的文件！