[英]How to import from React-Select CDN with React and Babel?
我按照React 网站上的步骤创建了一个 React 应用程序,但我在使用React-Select 库(尤其是 Select 组件)时遇到问题。
我只能使用cdn文件来加载依赖,包括位于cdnjs上的React-Select cdn文件
https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js
我的反应应用程序出现以下错误:
ReferenceError: Select is not defined[Learn More]
请参阅下面的脚本和此处的代码笔
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/react@15.0.0/dist/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
<script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<title>Using React Select CDN</title>
</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
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
);
}
}
ReactDOM.render(<App/>, document.querySelector("#root"))
</script>
</body>
</html>
我还尝试了以下抛出相同错误的方法
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/react@15.0.0/dist/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
<script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.1.2/react-select.js"></script>
<title>Using React Select CDN</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
require(['react-select'])
import Select from 'react-select';
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
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
);
}
}
ReactDOM.render(<App/>, document.querySelector("#root"))
</script>
</body>
</html>
我怎样才能让 React-Select 工作? 也许
它寻找最新的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>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.