Как импортировать в reactjs

Я пытаюсь импортировать "response-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

Спасибо за помощь

Извините, только что увидел ваше обновление. В дальнейшем вы можете отправлять уведомления, используя знак @ и упоминая мое имя в комментарии.

— 27.03.2019 15:33

Вы смотрели на CodePen, на который я ссылался ниже? На нем есть рабочий выбор даты и он использует React :)

— 27.03.2019 20:56

reactjs import

15.07.2018 03:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

235

Ответы 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/[email protected]/index.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.37.0/react-datepicker.js"></script>

Посмотрите, например, этот 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/[email protected]/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 ...-->

15.07.2018 09:47

Другие вопросы по теме

Есть ли разница между импортом сканера перед классом или в основном классе?

Eclipse javascript import javafx runtime error, используя Node.js

Не удалось зарезервировать блок памяти, ошибка импорта json в python

Относительный импорт вызывает ValueError

CSV, Группировка продуктов с родительскими

Импорт файлов с почти одинаковым путем и именем

Импортировать подпакет с библиотеками в python

Как автоматически импортировать определенный пользователем пакет в scala REPL при запуске scala REPL?

Как предотвратить импорт модуля Python в другой скрипт

ImportError: невозможно импортировать name _aligners [biopython]

Как импортировать в reactjs

Ответы 1

Другие вопросы по теме

Похожие вопросы