React Bootstrap Typeahead的CDN版本问题

Question

我正在尝试构建一个简单的前端页面，其中包含react bootstrap typeahead库，从CDN导入。

这是前端的部分代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap-typeahead/5.1.4/react-bootstrap-typeahead.js"></script>
<script type="text/babel">
class JobsTypeahead extends React.Component {
constructor(props) {
super(props);
this.state = {loading: false, options: []};
}
handleSearch(query) {
this.setState({loading: true});
fetch(`${site}/api/v2/job?name__icontains=${query}`)
.then((resp) => resp.json())
.then(({ items }) => {
const options = items.objects.map((i) => ({
id: i.id,
name: i.name,
}));
this.setState({loading: false, options: options});
});
};
render() {
return (
<AsyncTypeahead
id="job-typeahead"
isLoading={isLoading}
labelKey="login"
minLength={1}
onSearch={handleSearch}
options={options}
placeholder="Type in key words"
renderMenuItemChildren={(option, props) => (
<Fragment>
<span>{option.name}</span>
</Fragment>
)}
/>
);
};
}
</script>

但当我尝试渲染JobsTypeahead时，出现了抱怨AsyncTypeahead is not defined:的错误

react-dom.production.min.js:141 ReferenceError: AsyncTypeahead is not defined
at JobsTypeahead.render (<anonymous>:56:34)
at Te (react-dom.production.min.js:119)
at Ch (react-dom.production.min.js:119)
at Pj (react-dom.production.min.js:233)
at di (react-dom.production.min.js:168)
at Nj (react-dom.production.min.js:168)
at sc (react-dom.production.min.js:168)
at gf (react-dom.production.min.js:162)
at Pa (react-dom.production.min.js:157)
at yd (react-dom.production.min.js:188)
jquery-3.1.0.min.js:2 jQuery.Deferred exception: AsyncTypeahead is not defined ReferenceError: AsyncTypeahead is not defined
at JobsTypeahead.render (<anonymous>:56:34)
at Te (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:119:308)
at Ch (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:119:105)
at Pj (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:233:139)
at di (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:168:305)
at Nj (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:168:236)
at sc (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:168:96)
at gf (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:162:109)
at Pa (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:157:184)
at yd (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:188:476) undefined
jquery-3.1.0.min.js:2 Uncaught ReferenceError: AsyncTypeahead is not defined
at JobsTypeahead.render (<anonymous>:56:34)
at Te (react-dom.production.min.js:119)
at Ch (react-dom.production.min.js:119)
at Pj (react-dom.production.min.js:233)
at di (react-dom.production.min.js:168)
at Nj (react-dom.production.min.js:168)
at sc (react-dom.production.min.js:168)
at gf (react-dom.production.min.js:162)
at Pa (react-dom.production.min.js:157)
at yd (react-dom.production.min.js:188)

有人发现我做错了什么吗？

Answer 1

UMD模块公开的全局是ReactBootstrapTypeahead。因此，要访问AsyncTypeahead，您需要进行

window.ReactBootstrapTypeahead.AsyncTypeahead