在SAP WebIDE里开发一个React component
- 2019 年 10 月 30 日
- 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://jerry.blog.csdn.net/article/details/102778333
项目文件夹如下：
“`html
<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/[email protected]/dist/react.js"></script> <script src="https://unpkg.com/[email protected]/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/[email protected]/babel.min.js"></script> <script src="/js/main.js" type="text/babel"></script> <link href="/css/main.css" rel="stylesheet"> </head> <body> <div class="container"> <div id="product-list"></div> </div> </body>
“`
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') );
.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; }
最终结果：
