如何从HTML调用和形成React.js函数 [英] How to call and form a React.js function from HTML

查看:1093
本文介绍了如何从HTML调用和形成React.js函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我为我的所有代码创建了一个React.js文件,我将在下面发布,我将如何从html调用这个,但是,它包含大量的信息,因此,我不确定做了什么,我已经尝试过几天的过程中的几天,我尝试了很多东西,但是,我已经无法弄清楚如何从HTML调用JavaScript,我将深深感谢一些帮助,在这件事,我应该注意到,我是相当新的HTML,因为我只有工作了几天,因此,我的知识不是包罗万象,任何帮助将不胜感激,建议,以及告诉我哪些片段我的代码是错误的,我希望很快听到大家!



编辑:澄清,我只想学习如何调用这个JavaScript函数从HTML,任何其他信息将非常感谢,虽然。



编辑2:我真的遇到麻烦,无论我多少读,我似乎无法包装我的头一般概念。



index.html

 <!DOCTYPE html> 
< html>

< head>
< meta charset =UTF-8>
< meta name =descriptioncontent =BonApp>
< meta name =keywordscontent =HTML,CSS,JavaScript>
< meta name =viewportcontent =width = device-width; initial-scale = 1.0; maximum-scale = 1.0;>
< link href =index.csstype =text / css =stylesheet>
< link rel =stylesheethref =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.jsintegrity =sha256-36cp2Co + / 62rEAAYHLmRCPIych47CvdM + uTBJwSzWjI =crossorigin =anonymous> ; / script>
< link rel =stylesheettype =text / csshref =https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css/>
< link rel =stylesheettype =text / csshref =slick.css/>
< link rel =stylesheettype =text / csshref =slick-theme.css/>
< script type =text / javascriptsrc =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>
我不知道该怎么做。
< / 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 =navclassName =dark_bg_color>
< img src =logo.png/>
< div className =table_center>
< div>
< ul>
< li>每日特价< / li>
< li>礼品廊< / 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>注册< / button>
< button type =button>登录< / button>
< div className =vertical- line>& nbsp;< / div>
< button type =button>购物车< / div>
< / div>
< / div>
< / div>
);
}
});
ReactDOM.render(< NavBar />,document.getElementById('nav'));

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

{/ *图片库* /}
< div id =Gallery>
< div align =middle>
< div id =head>
< img id = picalign =middlemax-width =100%src =title_pic.png/>
< div align =leftclassName =big>
& div>
< span>用最好的< / span>一起吃饭< / span>
< div className =words>
<以及城市最好的厨师提供的活动。< 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 id =whatsnewclassName =dark_bg_color>
< h2 style = {{marginBottom:30}}>
< span>新功能< / 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 =eventsclassName =dark_bg_color>
< div className =box>
< div className =box-text>
< div className =horizo​​ntal-line/>
< div>< div className =horizo​​ntal-line/>< p> LES BON CADEAUX< / p& ;
< div className =horizo​​ntal-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> ; / li>
< 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>版权所有©2016 BonApp Dining Inc.< / li>
< li>隐私权政策< / li>
< li> Legal< / li>
< / ul>
< / div>
< / div>
< / div>
);
}
});
ReactDOM.render(< Footer />,document.getElementById(footer));


解决方案

我修复了发布代码的几个问题: / p>


  • 不允许在JSX标记之外的反应样式注释,应使用正常的JS注释。 (例如删除{})。

  • 您应该删除React组件中的所有id属性。此ids应该放在HTML代码中的容器元素中。在任何情况下,为了允许使用多次相同的组件,更改类的ids总是一个好主意。

  • 组件必须以大写字母开头,以区别于HTML标记。因此,我已将iOS重命名为IOS。

  • 我还更改了React库的URL,因为stackoverflow不允许从fb.me域执行脚本。



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



  var NavBar = React.createClass({render:function(){return(/ * NavBar * /< div className =dark_bg_color>< img src =logo.png/& ; div className =table_center>< div>< ul>< li>每日特辑< / li>< li>礼品库< / 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>注册< / button> < button type =button>登录< / button> < div className =vertical-line>& nbsp;< / div> < button type =button>购物车< / 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 =picalign =middlemax-width =100%src =title_pic.png < / span>< div className =words>< span> BonApp将您连接到< / span>< / div>< div align =leftclassName =big>< div>< < br />< br>< br />< button type =button> JOIN BONAPP< / button> < / span>< / div>);}}); ReactDOM.render(< Gallery /> ;,document.getElementById(Gallery)); var WhatsNew = React.createClass({render:function(){return(< div className =dark_bg_color> < h2 style = {{marginBottom:30}}> < span>新功能< / 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 =eventsclassName =dark_bg_color>< div className =box>< div className =box-text>< div className =horizo​​ntal-line/>< div& < div className =horizo​​ntal-line/>< p> LES BON CADEAUX< / p>< / div>< div className =horizo​​ntal-line/>< / div> gt;< / 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 (/ * Footer * /< div> < div className =footer_center> < div> < ul> < li>关于< / 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>版权所有©2016 BonApp Dining Inc.< / li> < li>隐私权政策< / li> < li> Legal< / li> < / ul> < / div> < / div> < / div> ); }}); ReactDOM.render(< Footer />,document.getElementById(footer));  

 <!DOCTYPE html>< html>< head> < meta charset =UTF-8> < meta name =descriptioncontent =BonApp> < meta name =keywordscontent =HTML,CSS,JavaScript> < meta name =viewportcontent =width = device-width; initial-scale = 1.0; maximum-scale = 1.0;> < link href =index.csstype =text / css =stylesheet> < link rel =stylesheethref =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.jsintegrity =sha256-36cp2Co + / 62rEAAYHLmRCPIych47CvdM + uTBJwSzWjI =crossorigin =anonymous>< / script> < link rel =stylesheettype =text / csshref =https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css/> < link rel =stylesheettype =text / csshref =slick.css/> < link rel =stylesheettype =text / csshref =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 / javascriptsrc =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>  


I have created a React.js file for all of my code which I will post below, how would I go about calling this from the html however, it contains a fair amount of information, as a result, I am unsure exactly what to do, I have tried several times over the course of several days, I have tried many things, however, I have been unable to figure out out how to call the JavaScript from HTML, I would deeply appreciate some help in this matter, I should note that I am fairly new to HTML, as in I have only been working with it for several days, as a result, my knowledge is not all encompassing, any help would be appreciated, suggestions as well as telling me which fragments of my code are wrong, I hope to hear from everybody soon!

EDIT: To clarify, I am only looking to learn how to call this JavaScript function from HTML, any other information would be greatly appreciated though.

EDIT 2: I am seriously having trouble with this, no matter how much I read, I appear to be unable to wrap my head around the general concepts.

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

解决方案

I have fixed several problems with the posted code:

  • React style comments are not allowed outside of a JSX tag, you should use normal JS comments. (e.g. remove the {}).
  • You should remove all the id attributes in React components. This ids should go in the container elements in the HTML code. In any case, it is always a good idea to change ids for classes in order to allow using several times the same component.
  • Components must start with an uppercase letter to differentiate them from HTML tags. Therefore, I have renamed iOS to IOS.
  • I have also changed the URL of the React libraries as stackoverflow doesn't allow executing scripts from the fb.me domain.

In order to include the components into your HTML code you have to transpile your JSX code into regular JS. In order to do so, you have several options: Webpack, Browserify, Babel, even in-browser conversion. Depending on the size and complexity of your application, some methods are more suitable than others. I would recommend you to start with the simplest one and then change it for more powerful tools, like webpack, when you are confident with the React part. Learning and configuring these tools can be rather frustrating, so I would avoid them until the need comes.

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>

这篇关于如何从HTML调用和形成React.js函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆