在SAP WebIDE里开发一个最简单的react component
生活随笔
收集整理的這篇文章主要介紹了
在SAP WebIDE里开发一个最简单的react component
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
源代碼如下：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"><script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script src="https://unpkg.com/react@15.3.2/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.5/react-bootstrap.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script><style>.vertical-align {display: flex;align-items: baseline;}.vertical-align .top {align-self: baseline;}.vertical-align .center {align-self: center;}.available {color: green;font-weight: bold;}.discontinued {color: red;font-weight: bold;} </style><script type="text/babel">var ListBox = React.createClass({render: function() {return (<button type="button" className="list-group-item" id="product-list"><div className="row vertical-align"><div className="col-sm-8 top"><h4>Top Label</h4><p>10 boxes at 20 bags</p></div><div className="col-sm-3 text-right top"><h4>99.99<small className="text-muted"> EUR</small></h4><p>Available</p></div><div className="col-sm-1 center"><span className="glyphicon glyphicon-chevron-right pull-right" aria-hidden="true"></span></div></div></button>);} });var ProductList = React.createClass({render: function() {return (<div className="list-group"><ListBox /><ListBox /><ListBox /></div>)} });ReactDOM.render(<ProductList />,document.getElementById('product-list') );</script> </head><body><div class="container"> <div id="product-list"></div> </div></body> </html>效果如下：
要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":
總結(jié)
以上是生活随笔為你收集整理的在SAP WebIDE里开发一个最简单的react component的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IGPU是什么(5800H核显是什么)
- 下一篇： SAP UI5 myTask setBi