React InstantSearch Dropdown RefinementList 不工作：需要一个字符串或 class/function（对于复合组件）但得到：未定义

Question

我正在尝试使用 this guide to create a dropdown refinementlist instead of the default. I first created a Dropdown.js with contents form here

import React, { Component } from 'react';
import { connectRefinementList } from 'react-instantsearch/connectors';
import PropTypes from 'prop-types';

const cx = label => `ais-DropdownRefinementList-${label}`;
/// Rest of the code from the above link follows
export default connectRefinementList(DropdownRefinementList);

然后我将它导入我的 search.js 组件，它构建我的界面如下：

import { DropdownRefinementList} from "./Dropdown"

并像这样使用它：

<DropdownRefinementList attribute="major" />

这给了我以下错误：

×
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `SearchGrid`.

SearchGrid 只是我的搜索组件。当我删除 <DropdownRefinementList attribute="major" /> 后问题就消失了，所以这一定是问题所在。

我的实现有问题吗？我该如何解决这个问题？

Answer 1

应该是import DropdownRefinementList from "./Dropdown"

这是因为您要从 Dropdown.js 文件中导出默认值。