Question

我的问题相当简单，我将如何设置反应javascript的样式，另外，我将如何添加滚动条，因为我所拥有的页面大部分都在屏幕外，并且无法向下滚动。此外，我如何在现有代码上使用另一个js文件，我目前使用Slick作为图像滑块，但是，我无法弄清楚如何合并必要的文件。

编辑：

当前代码：

<!DOCTYPE html>
<html>

<head>


    <meta charset="UTF-8">
    <meta name="description" content="BonApp">
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <link href="index.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" />
    <link rel="stylesheet" type="text/css" href="slick.css" />
    <link rel="stylesheet" type="text/css" href="slick-theme.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-with-addons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
    <script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591530_1796350410598576_924751100_n.js"></script>
    <script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591520_511026312439094_2118166596_n.js"></script>

    <title>BonApp</title>
</head>

<body>
  <div id="nav"></div>
  <div id="Gallery"></div>
  <div id="whatsnew"></div>
  <div id="advertiseApp"></div>
  <div id="events"></div>
  <div id="footer"></div>
</body>

<script type="text/javascript">
    $('.autoplay').slick({
        slidesToShow: 2
        , slidesToScroll: 1
        , autoplay: true
        , autoplaySpeed: 2000
    , });
</script>

<script type="text/javascript">
  var NavBar = React.createClass({
  displayName: "NavBar",

  render: function render() {
    return(
      /* NavBar */
      React.createElement(
        "div",
        { className: "dark_bg_color" },
        React.createElement("img", { src: "logo.png" }),
        React.createElement(
          "div",
          { className: "table_center" },
          React.createElement(
            "div",
            null,
            React.createElement(
              "ul",
              null,
              React.createElement(
                "li",
                null,
                "daily specials"
              ),
              React.createElement(
                "li",
                null,
                "gift gallery"
              ),
              React.createElement(
                "li",
                null,
                "events"
              ),
              React.createElement(
                "li",
                null,
                React.createElement("i", { className: "fa fa-search" }),
                " search"
              )
            )
          )
        ),
        React.createElement(
          "div",
          { className: "right_nav" },
          React.createElement(
            "div",
            { className: "table_center" },
            React.createElement(
              "div",
              null,
              React.createElement(
                "button",
                { type: "button" },
                "Sign Up"
              ),
              React.createElement(
                "button",
                { type: "button" },
                "Log In"
              ),
              React.createElement(
                "div",
                { className: "vertical-line" },
                " "
              ),
              React.createElement(
                "button",
                { type: "button" },
                "Cart"
              )
            )
          )
        )
      )
    );
  }
  });
  ReactDOM.render(React.createElement(NavBar, null), document.getElementById('nav'));
</script>

<script type="text/javascript">
  var Gallery = React.createClass({
    displayName: "Gallery",

    render: function render() {
      return(
        /* Gallery */
        React.createElement(
          "div",
          null,
          React.createElement(
            "div",
            { align: "middle" },
            React.createElement(
              "div",
              { id: "head" },
              React.createElement("img", { id: "pic", align: "middle", "max-width": "100%", src: "title_pic.png" }),
              React.createElement(
                "div",
                { align: "left", className: "big" },
                React.createElement(
                  "div",
                  null,
                  React.createElement(
                    "span",
                    null,
                    "Dine with the Best"
                  ),
                  React.createElement(
                    "div",
                    { className: "words" },
                    React.createElement(
                      "span",
                      null,
                      "BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.",
                      React.createElement("br", null),
                      React.createElement("br", null),
                      React.createElement("br", null),
                      React.createElement(
                        "button",
                        { type: "button" },
                        "JOIN BONAPP"
                      )
                    )
                  )
                )
              )
            )
          )
        )
      );
    }
  });
  ReactDOM.render(React.createElement(Gallery, null), document.getElementById("Gallery"));
</script>

<script type="text/javascript">
  var WhatsNew = React.createClass({
    displayName: "WhatsNew",

    render: function render() {
      return React.createElement(
        "div",
        { className: "dark_bg_color" },
        React.createElement(
          "h2",
          { style: { marginBottom: 30 } },
          React.createElement(
            "span",
            null,
            "What's New"
          )
        ),
        React.createElement(
          "div",
          { className: "autoplay" },
          React.createElement("img", { src: "whatsnew0.png" }),
          React.createElement("img", { src: "whatsnew1.png" }),
          React.createElement("img", { src: "whatsnew0.png" })
        )
      );
    }
  });
  ReactDOM.render(React.createElement(WhatsNew, null), document.getElementById("whatsnew"));
</script>

<script type="text/javascript">
  var BonEvents = React.createClass({
    displayName: "BonEvents",

    render: function render() {
      return(
        /* Events */
        React.createElement(
          "div",
          { id: "events", className: "dark_bg_color" },
          React.createElement(
            "div",
            { className: "box" },
            React.createElement(
              "div",
              { className: "box-text" },
              React.createElement("div", { className: "horizontal-line" }),
              React.createElement(
                "div",
                null,
                React.createElement("div", { className: "horizontal-line" }),
                React.createElement(
                  "p",
                  null,
                  "LES BON CADEAUX"
                )
              ),
              React.createElement("div", { className: "horizontal-line" })
            )
          ),
          React.createElement(
            "h2",
            null,
            React.createElement(
              "span",
              null,
              "Bon Events"
            )
          ),
          React.createElement("div", null)
        )
      );
    }
  });
  ReactDOM.render(React.createElement(BonEvents, null), document.getElementById("events"));
</script>

<script type="text/javascript">
  var IOS = React.createClass({
    displayName: "IOS",

    render: function render() {
      /* IOS */
      return React.createElement(
        "div",
        null,
        React.createElement(
          "h2",
          null,
          React.createElement("span", null)
        )
      );
    }
  });
  ReactDOM.render(React.createElement(IOS, null), document.getElementById("advertiseApp"));
</script>
<script type="text/javascript">
  var Footer = React.createClass({
    displayName: "Footer",

    render: function render() {
      return(
        /* Footer */
        React.createElement(
          "div",
          null,
          React.createElement(
            "div",
            { className: "footer_center" },
            React.createElement(
              "div",
              null,
              React.createElement(
                "ul",
                null,
                React.createElement(
                  "li",
                  null,
                  "ABOUT"
                ),
                React.createElement(
                  "li",
                  null,
                  "PRESS"
                ),
                React.createElement(
                  "li",
                  null,
                  "CONTACT"
                ),
                React.createElement(
                  "li",
                  null,
                  "SUPPORT"
                ),
                React.createElement(
                  "li",
                  null,
                  "BONAPP FOR RESTAURANTEURS"
                )
              )
            )
          ),
          React.createElement(
            "div",
            { className: "legal_center" },
            React.createElement(
              "div",
              null,
              React.createElement(
                "ul",
                null,
                React.createElement(
                  "li",
                  null,
                  "Copyright © 2016 BonApp Dining Inc."
                ),
                React.createElement(
                  "li",
                  null,
                  "Privacy Policy"
                ),
                React.createElement(
                  "li",
                  null,
                  "Legal"
                )
              )
            )
          )
        )
      );
    }
  });
  ReactDOM.render(React.createElement(Footer, null), document.getElementById("footer"));
</script>

</html>

Answer 1

对您的反应应用程序进行样式设置与普通的HTML样式相比并不常见。您需要为webpack配置添加一些加载程序，如果您熟悉HTML / CSS，则需要将它与您不熟悉的用户联系起来。我建议看一下我写的这个教程，详细介绍如何设置一个反应应用程序的样式。

http://davidmeents.com/journey-into-react-part-4-styling-with-scss-and-webpack/

基本上，您要将所有SASS文件导入index.js文件，您可以在其中指向Webpack。加载器将编译您的SASS，并将其输出到缩小的CSS文件。您可以像往常一样在index.html文件中包含此内容。

希望这有帮助，快乐的编码！

如何设置Reactjs脚本

1 个答案: