如何将 airbnb react-dates 添加到我的 HTML 页面？

Question

I would like to have the airbnb react-dates SingleDatePicker or DateRangePicker appear on my html page.我想让airbnb react-dates SingleDatePicker 或 DateRangePicker 出现在我的 html 页面上。 What do I need to add to my html page to get this to function correctly?我需要向我的 html 页面添加什么才能将其正确发送到 function？ Which files do I need from the airbnb react-dates?我需要 airbnb react-dates 中的哪些文件？

I am a designer with basic html and css knowledge and in the last few days, I went from zero percent javascript knowledge and never hearing of react, to learning about the basics and installing node.js/npm, using terminal for my first time ever, connecting to the server and being so close, but I still do not understand.我是一名设计师，具有基本的 html 和 css 知识，在过去的几天里，我从 javascript 的零知识和从未听说过 React，到学习基础知识和安装 node.js/npm，这是我第一次使用终端, 连接到服务器并如此接近，但我仍然不明白。

I just want to add a simple datepicker, something I can do in html/css/js in a few minutes, but this react thing is extremely confusing to me.我只想添加一个简单的日期选择器，我可以在几分钟内在 html/css/js 中完成，但是这个反应让我非常困惑。 Do I need to run the commands in terminal or can I just add some code to my html, with the airbnb react-dates files?我是否需要在终端中运行命令，或者我是否可以使用 airbnb react-dates 文件向我的 html 添加一些代码？ I have tried many dozens of recommendations, asked questions on here and other sites, all without any success.我已经尝试了数十种建议，在这里和其他网站上提出了问题，但都没有成功。 Thank you for your help!感谢您的帮助！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Please help me with airbnb react-dates!</title>
</head>
<body>
    <div id="root">
        I would like to have the <a href="https://github.com/airbnb/react-dates/">airbnb react-dates</a> SingleDatePicker or DateRangePicker here.
    </div>
</body>
</html>

Note: I am only including the html, because I do not know the other scripts needed from the airbnb react-dates link to get this to work.注意：我只包括 html，因为我不知道airbnb react-dates链接需要其他脚本才能使其正常工作。

Answer 1

^{Moving solution from the question to its own answer}^{将解决方案从问题转移到自己的答案}

I was able to get this to work using the like button example我能够使用类似按钮示例让它工作

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>
    
    <!-- We will put our React component inside this div. -->
    
    <div id="datepicker"></div>
    
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="datepicker.js"></script>

  </body>

    
</html>

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#datepicker');
ReactDOM.render(e(LikeButton), domContainer);

如何将 airbnb react-dates 添加到我的 HTML 页面？

问题描述

1 个解决方案

解决方案1
0

如何将 airbnb react-dates 添加到我的 HTML 页面？

问题描述

1 个解决方案

解决方案1 0

解决方案1
0