javascript - 其余参数在我的 react 引导组件中产生错误？

Question

这总是对我有用，但由于某种原因，它在我的react-bootstrap组件中不起作用，这很令人困惑，剩余参数{classes, ...props}导致代码抛出错误，不知道为什么？

当我尝试在 codesandbox 中重现错误时，一切正常，但即使在创建许多新项目并删除所有可能影响代码的包之后，错误仍然存​​在于我的机器中，直到我到达这一点我创建了一个非常基本的项目，我将其上传到 github here

仅从 dropdown.js 文件导入 ReusableDropdown 组件会产生类型错误，并且 React 表示错误发生在组件本身而不是父组件内部:

./src/reusable/dropdown.js
TypeError: Cannot read property 'forEach' of undefined

这应该有效，我确信该错误与语法无关，这是一种奇怪的错误!!

PS:您需要安装react-bootstrap和bootstrap作为依赖项才能重现错误

Answer 1

这可能是一个题外话，但是，因为我看到没有 classes在<ReusableDropdown>组件，

<ReusableDropdown text="his"/>

我想建议添加defaultProps，如下所示

import React, { Component } from 'react';
import { Dropdown } from 'react-bootstrap';

export default ({classes = [], ...props}) => {
  return (
    <Dropdown>
       <Dropdown.Toggle className={classes.toggle}>{props.text}</Dropdown.Toggle>
       <Dropdown.Menu>
         <Dropdown.Item>hi</Dropdown.Item>
       </Dropdown.Menu>
    </Dropdown>
  );
}

或者，您可以检查空值

<Dropdown>
  <Dropdown.Toggle className={classes && classes.toggle}>
    {props.text}
  </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>hi</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

而且，据我了解 Dropdown.Toggle需要id支柱。您还能检查一下所需的 Prop 吗？