Reactjs React引导程序的CDN版本存在问题

Reactjs React引导程序的CDN版本存在问题,reactjs,react-bootstrap-typeahead,Reactjs,React Bootstrap Typeahead,我正在尝试使用react引导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.mi

我正在尝试使用react引导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>

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

UMD模块公开的全局设置是
reactbootstraptypehead
。因此,要访问AsyncTypeahead,您需要执行以下操作

window.ReactBootstrapTypeahead.AsyncTypeahead
window.ReactBootstrapTypeahead.AsyncTypeahead