0

我想让airbnb react-dates SingleDatePicker 或 DateRangePicker 出现在我的 html 页面上。我需要在我的 html 页面中添加什么才能使其正常运行？我需要 airbnb react-dates 中的哪些文件？

我是一名具有基本 html 和 css 知识的设计师，在过去的几天里，我从 0% 的 javascript 知识和从未听说过 react 到学习基础知识并安装 node.js/npm，这是我第一次使用终端，连接到服务器并如此接近，但我仍然不明白。

我只是想添加一个简单的日期选择器，我可以在几分钟内在 html/css/js 中完成一些事情，但是这个 react 事情让我非常困惑。我是否需要在终端中运行命令，或者我可以使用 airbnb react-dates 文件向我的 html 添加一些代码吗？我已经尝试了许多建议，在这里和其他网站上提出了问题，但都没有成功。谢谢您的帮助！

<!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>

注意：我只包含 html，因为我不知道airbnb react-dates链接中需要其他脚本才能使其正常工作。

4

1 回答 1

0

将解决方案从问题转移到自己的答案

我能够使用类似按钮示例来使它工作

<!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);
于 2021-09-27T20:49:13.300 回答