Question

我正在尝试在以下代码中导入“ react-dropdowns-datepicker”和“ react”，但是它不起作用：

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>

import React from 'react';
import DatePicker from'react-dropdowns-datepicker';

<body>
<div id="root"></div>
<script type="text/babel">

class Main extends React.Component{
    render() {return (<div>asdf</div>)}
}

ReactDOM.render(
    <Main/>,
    document.getElementById('root')
);

</script>
</body>

什么是正确的方法？谢谢

PS：我已经尝试过您提到的更改，

我尝试了这个：

<body>
<div id="root"></div>
<script type="text/babel">

class Main extends React.Component{
    render() {return (<div>asdf</div>)}
}

ReactDOM.render(
    <Main/>,
    document.getElementById('root')
);

</script>
</body>

这是错误：

react-datepicker.js:4850 Uncaught TypeError: (0 , _reactOnclickoutside2.default) is not a function
    at Object.<anonymous> (react-datepicker.js:4850)
    at __webpack_require__ (react-datepicker.js:30)
    at Object.<anonymous> (react-datepicker.js:648)
    at __webpack_require__ (react-datepicker.js:30)
    at Object.<anonymous> (react-datepicker.js:63)
    at __webpack_require__ (react-datepicker.js:30)
    at react-datepicker.js:50
    at react-datepicker.js:53
    at webpackUniversalModuleDefinition (react-datepicker.js:9)
    at react-datepicker.js:10
(anonymous) @ react-datepicker.js:4850
__webpack_require__ @ react-datepicker.js:30
(anonymous) @ react-datepicker.js:648
__webpack_require__ @ react-datepicker.js:30
(anonymous) @ react-datepicker.js:63
__webpack_require__ @ react-datepicker.js:30
(anonymous) @ react-datepicker.js:50
(anonymous) @ react-datepicker.js:53
webpackUniversalModuleDefinition @ react-datepicker.js:9
(anonymous) @ react-datepicker.js:10

感谢您的帮助

Answer 1

如果您打算使用react-dropdowns-datepicker，请使用以下链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://unpkg.com/react-onclickoutside@5.7.1/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.37.0/react-datepicker.js"></script>

以this CodePen为例。

请注意，这里的顺序很重要，因为这三个相互依赖。

最后，您的代码应类似于以下内容：

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js></script>
<script src="https://unpkg.com/react-onclickoutside@5.7.1/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.37.0/react-datepicker.js"></script>

</head>

<body>
<div id="root"></div>
<script type="text/babel">

<!-- ... the rest of your code continues on here ...-->

如何在reactjs中导入

1 个答案: