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