基于 react 的Java web 应用—— 组件复用(后续需更新)

前端之家收集整理的这篇文章主要介绍了基于 react 的Java web 应用—— 组件复用(后续需更新)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

实习第二周,被告知要用React与导师进行基于React的Javaweb 的开发,jinzhangaaaaa~由于React 这款框架没学过,看了一峰老师的基础入门教程,硬着头皮开始上了...


组件的复用

实现基本的需求之后,校阅代码时,发现 A 组件内有大量相似的代码代码不够简洁,自然而然想到组件的复用。

  1. 先上demo
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="build/react.js"></script>
  7. <script src="build/react-dom.js"></script>
  8. <script src="build/browser.min.js"></script>
  9. </head>
  10. <body>
  11. <div id="app"></div>
  12. <script type="text/babel">
  13. var HelloReact = React.createClass({
  14. // propTypes :{
  15. // title: React.PropTypes.string.isrequired,// },// getDefaultProps : function () {
  16. // return {
  17. // name : " hello React"
  18. // };
  19. // },// 渲染的 HTML 内容
  20. render : function () {
  21. return<div>
  22. <h1>{this.props.title}
  23. <div>
  24. <h2>{this.props.name}</h2>
  25. </div>
  26. </h1>
  27. <Child head="我是标题1" content="我是内容1" />
  28. <Child head="我是标题2" content="我是内容2"> </HelloMessage>
  29. </div>;
  30.  
  31.  
  32. }
  33. });
  34.  
  35. // 子组件 : 全局定义 或者是在 父组件内定义均可
  36. // 父组件里有很多数据[比如head,content] 需要从 父组件(调用)传递给子组件(定义),
  37. // 在这里加上组件模板
  38. var Child = React.createClass({
  39. render: function() {
  40. return<div>
  41. <h1>标题 {this.props.head}</h1>
  42. <h2>内容 :{this.props.content} </h2>
  43. </div>;
  44. }
  45. });
  46.  
  47. // var data = "123";
  48. // var name = "React";
  49.  
  50. ReactDOM.render(
  51. <HelloReact/>,document.getElementById('app')
  52. );
  53.  
  54. </script>
  55. </body>
  56. </html>

以上的demo 的代码注释已经尽量详细,这里有个至今较为困惑的点:父子组件的关系明确;我的简单理解是;同一个的Child 组件 ,定义时,它为子组件,而在使用调用时,则为父组件; 若有错误,欢迎大家的指正!


写完demo,结合项目,开始改改改...

该项目属于老项目,现在的工作是在原来的基础上新增部分类似的功能板块,同时做相关的优化

项目组件文件的结构目录

  1. app
  2. components
  3. ConsumeBill.jsx -----A 组件=demo中的HelloReact
  4. ChildBill.jsx ------Child 组件
  5. ....
  6. ...
  7. ...

在A组件中需要引入Child 组件,在其 render方法中多次使用 Child组件 。[考虑代码阅读:将Child组件以外部文件的方式引入;若Child组件的HTML 代码非常简短,可无需外部引入,同demo中类似直接放在 A组件的React.createClass语句中] ;


  1. 继续先上demo
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="build/react.js"></script>
  7. <script src="build/react-dom.js"></script>
  8. <script src="build/browser.min.js"></script>
  9. </head>
  10. <body>
  11. <div id="app"></div>
  12. <script type="text/babel">
  13.  
  14. var HelloReact = React.createClass({
  15.  
  16. // propTypes :{
  17. // title: React.PropTypes.string.isrequired,// 渲染的 HTML 内容
  18. // 这里注意: JS语句 写在HelloReact组件中return [return 是React语句]外面,在HelloReact 组件的 **render方法**里面
  19. render : function () {
  20. let datas1 = {head:"我是标题1",content:"我是内容1"};
  21. let datas2 = {head:"我是标题2",content:"我是内容2"};
  22. return<div>
  23. <h1>{this.props.title}
  24. <div>
  25. <h2>{this.props.name}</h2>
  26. </div>
  27. </h1>
  28.  
  29. <Child datas={datas1} />
  30. <Child datas={datas2}/>
  31. </div>;
  32. }
  33. });
  34.  
  35. // 子组件 : 全局定义 或者是在 父组件内定义均可
  36. // 父组件里有很多数据[比如head,content] 需要从 父组件(调用)传递给子组件(定义),
  37. // 在这里加上组件模板
  38.  
  39. var Child = React.createClass({
  40.  
  41. render: function() {
  42. // ES6 语法对象解购赋值,可在Raect 语句中直接使用 head ,cotent
  43. let {head="",content=""} = this.props.datas;
  44.  
  45. return<div>
  46. <h1>标题 {head}</h1>
  47. <h2>内容 :{content} </h2>
  48. </div>;
  49. }
  50. });
  51.  
  52. // var data = "123";
  53. // var name = "React";
  54.  
  55. ReactDOM.render(
  56. <HelloReact/>,document.getElementById('app')
  57. );
  58. </script>
  59. </body>
  60. </html>

*注意: JS语句 写在Father组件中return [return 里是React语句]外面,在Father 组件的 render方法*里面


  1. 上面例子的demoHelloReact Child 组件是在同一文件(组件)内;外部引入呢?只要的Child部分代码 以外部文件引入则可,后续补充。

猜你在找的React相关文章