堆栈内存溢出
  繁体   English   中英

如何从HTML调用和形成React.js函数

[英]How to call and form a React.js function from HTML

 原文  2016-07-16 18:11:20  2   2    javascript/ html/ css/ reactjs

问题描述

我已经为我的所有代码创建了一个React.js文件，我将在下面发布，如何从html调用它，但是它包含了大量的信息，因此，我不确定该做什么，我已经好几天尝试了几次，我已经尝试了很多东西，但是，我一直无法弄清楚如何从HTML中调用JavaScript，我会深深体会到这方面的一些帮助，我应该注意我对HTML很新，因为我只使用了几天，因此，我的知识并不全是包含在内，任何帮助都会受到赞赏，建议以及告诉我代码的哪些片段是错了，我希望很快能听到大家的意见！

编辑：为了澄清，我只是想学习如何从HTML调用这个JavaScript函数，但任何其他信息将不胜感激。

编辑2：我真的很难解决这个问题，无论我读了多少，我似乎无法围绕一般概念。

的index.html 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="BonApp">
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
    <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 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>
I don't know what to do here.
</body>

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

</html>

index.js 

require("babel-core").transform("code", options);

var NavBar = React.createClass({
  render: function() {
    return (

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

var Gallery = React.createClass({
  render: function() {
    return (

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

var WhatsNew = React.createClass({
  render: function() {
    return (

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

var BonEvents = React.createClass({
  render: function() {
    return (

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

var iOS = React.createClass({
  render: function() {
    return (

      {/* iOS App */}
      <div id="advertiseApp">
        <h2>
          <span />
        </h2>
      </div>
    );
  }
});
ReactDOM.render(<iOS />, document.getElementById("advertiseApp"));

var Footer = React.createClass({
  render: function() {
    return (

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

2 个解决方案

解决方案1
 3 已采纳  2016-07-22 12:37:05

我已修复已发布代码的几个问题：

  • 在JSX标记之外不允许使用React样式注释，您应该使用普通的JS注释。 （例如删除{}）。
  • 您应该删除React组件中的所有id属性。 这个ID应该放在HTML代码中的容器元素中。 在任何情况下，更改类的ID总是一个好主意，以便允许多次使用相同的组件。
  • 组件必须以大写字母开头，以区别于HTML标记。 因此，我已将iOS重命名为IOS。
  • 我还更改了React库的URL，因为stackoverflow不允许从fb.me域执行脚本。

为了将组件包含到HTML代码中，您必须将JSX代码转换为常规JS。 为此，您有几个选项：Webpack，Browserify，Babel，甚至是浏览器内转换。 根据应用程序的大小和复杂程度，某些方法比其他方法更合适。 我建议你从最简单的一个开始，然后在你对React部分有信心时将其更改为更强大的工具，比如webpack。 学习和配置这些工具可能会相当令人沮丧，所以在需要之前我会避免它们。 

 var NavBar = React.createClass({ render: function() { return ( /* NavBar */ <div className="dark_bg_color"> <img src="logo.png" /> <div className="table_center"> <div> <ul> <li>daily specials</li> <li>gift gallery</li> <li>events</li> <li><i className="fa fa-search" />&nbsp;search</li> </ul> </div> </div> <div className="right_nav"> <div className="table_center"> <div> <button type="button">Sign Up</button> <button type="button">Log In</button> <div className="vertical-line">&nbsp;</div> <button type="button">Cart</button> </div> </div> </div> </div> ); } }); ReactDOM.render(<NavBar />, document.getElementById('nav')); var Gallery = React.createClass({ render: function() { return ( /* Gallery */ <div > <div align="middle"> <div id="head"> <img id="pic" align="middle" max-width="100%" src="title_pic.png" /> <div align="left" className="big"> <div> <span>Dine with the Best</span> <div className="words"> <span>BonApp connects you with limited-time, exclusive meals and events offered by the city's best chefs.<br /><br /><br /><button type="button">JOIN BONAPP</button></span> </div> </div> </div> </div> </div> </div> ); } }); ReactDOM.render(<Gallery />, document.getElementById("Gallery")); var WhatsNew = React.createClass({ render: function() { return ( <div className="dark_bg_color"> <h2 style={{marginBottom: 30}}> <span>What's New</span> </h2> <div className="autoplay"> <img src="whatsnew0.png" /> <img src="whatsnew1.png" /> <img src="whatsnew0.png" /> </div> </div> ); } }); ReactDOM.render(<WhatsNew />, document.getElementById("whatsnew")); var BonEvents = React.createClass({ render: function() { return ( /* Events */ <div id="events" className="dark_bg_color"> <div className="box"> <div className="box-text"> <div className="horizontal-line" /> <div><div className="horizontal-line" /><p>LES BON CADEAUX</p></div> <div className="horizontal-line" /> </div> </div> <h2> <span>Bon Events</span> </h2> <div> </div> </div> ); } }); ReactDOM.render(<BonEvents />, document.getElementById("events")); var IOS = React.createClass({ render: function() { /* IOS */ return ( <div > <h2> <span /> </h2> </div> ); } }); ReactDOM.render(<IOS />, document.getElementById("advertiseApp")); var Footer = React.createClass({ render: function() { return ( /* Footer */ <div> <div className="footer_center"> <div> <ul> <li>ABOUT</li> <li>PRESS</li> <li>CONTACT</li> <li>SUPPORT</li> <li>BONAPP FOR RESTAURANTEURS</li> </ul> </div> </div> <div className="legal_center"> <div> <ul> <li>Copyright © 2016 BonApp Dining Inc.</li> <li>Privacy Policy</li> <li>Legal</li> </ul> </div> </div> </div> ); } }); ReactDOM.render(<Footer />, document.getElementById("footer")); 
 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="BonApp"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <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> </html>

解决方案2
 0  2016-07-21 05:56:10

您需要使用ReactDOM渲染组件。 正如它在博客上所说的那样

“当你进入React的世界时，你只是构建适合其他组件的组件。一切都是组件。不幸的是，你周围的一切都不是使用React构建的。在树的根部你仍然需要编写一些管道代码来连接外部世界变成了React。“

在React中，您不从html调用组件，而是从脚本文件将其插入DOM。

因此，对于您的示例，您可能包括 

<div id ="app"></div>

进入HTML。

然后，在index.js中使用ReactDOM（不要忘记包含库）来将youur组件呈现给DOM。 我会使用jsx，因为它看起来像你。 

ReactDOM.render(<NewComponent />, document.getElementById('app'));

一个更好的文章中，我已经找到了概述，包括设立通天的WebPack，热重装做出反应的工作流程，以及基本的应用程序结构是这里

现在，您已经将大量组件分配给同名的声明变量，因此您还需要修复它。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 React.js：如何从表单提交更新 API 调用 react.js从孩子那里调用父函数 react.js：从另一个组件调用一个函数 从 React.js 中的另一个 class 组件调用 function react.js-从父组件调用函数 在React.JS中从子级调用父组件函数 如何使用react.js中的引用从类型文件的html输入形式获取文件数据 React.js / CRA，如何从另一个文件调用或导入javaScript函数？ React.js：将React.js代码与HTML分开 如何从另一个React.js文件调用函数？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM