根据项目经理的要求,我不能将它与 npm 捆绑在一起,所以我坚持使用每个库的 CDN 版本。
到目前为止,一切都运行良好,React、Material-UI、React-Select 和 Babel。
但是尝试包含 Async.js ( https://unpkg.com/react-select/lib/Async.js ) 给我 Uncaught ReferenceError: exports is not defined
我在 https://unpkg.com/react-select/dist/react-select.js 中看到了有对 Async
和 AsyncSelect
的引用,但我不知道如何使用 AsyncSelect 组件,如 https://react-select.com/async 所示。
这就是我使用库的方式:
<script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.js"></script>
<!-- ... and other dependencies -->
最佳答案
如果你引用this other question并复制/粘贴此答案中的所有依赖项,您将能够访问 react-select
元素。
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.min.js"></script>
完成后,Async
特定组件将可以通过 Select.Async
访问,如下例所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select@2.1.2/dist/react-select.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
class App extends React.Component {
state = {
selectedOption: null,
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
render() {
const { selectedOption } = this.state;
return (
<div>
Test Text
<Select.Async
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
);
}
}
ReactDOM.render(<App/>, document.querySelector("#root"))
</script>
</body>
</html>
关于javascript - 我可以使用来自 CDN 的 React-Select Async (AsyncSelect) 吗? (我收到 Uncaught ReferenceError : exports is not defined),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55975437/