如何将airbnb react-dates添加到HTML页面?

时间:2019-09-22 17:39:53

标签: javascript html reactjs airbnb react-dates

更新:

多亏了MaartenDev,我能够按照他的建议使用like button example使它生效。我想用DateRangePicker或SingleDatePicker替换类似的按钮。我应该在js中编辑什么?有什么建议么?谢谢您的帮助!

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

0 个答案:

没有答案