脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h4>前言</h4> <blockquote> <p>实习第二周,被告知要用<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>与导师进行基于<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>的Javaweb 的开发,j<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>zhangaaaaa~由于<a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a> 这款框架没学过,看了一峰老师的基础入门教程,硬着头皮开始上了...</p> </blockquote> <hr> <h5>组件的复用</h5> <blockquote> <p>实现基本的需求之后,校阅代码时,发现 A 组件内有大量相似的代码,代码不够简洁,自然而然想到组件的复用。</p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="先上demo:" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">先上demo:</code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>Title</title><br /> <script src=&quot;build/react.js&quot;></script><br /> <script src=&quot;build/react-dom.js&quot;></script><br /> <script src=&quot;build/browser.min.js&quot;></script><br /> </head><br /> <body></p> <div id=&quot;app&quot;></div> <p> <script type=&quot;text/babel&quot;></p> <p> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> HelloReact = React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>({</p> <p>// propTypes :{ // title: React.<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>Types.str<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g.isRequired, // }, // getDefault<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>s : <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> () { // <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> { // <a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a> : &quot; hello React&quot; // }; // },</p> <p> // 渲染的 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 内容 render : <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> () { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a></p> <div> <h1>{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.title}</p> <div> <h2>{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>}</h2> </p></div> </h1> <p> <Child head=&quot;我是标题1&quot; content=&quot;我是内容1&quot; ></Child> <Child head=&quot;我是标题2&quot; content=&quot;我是内容2&quot;> </HelloMessage> </div> <p>;</p> <p> } });</p> <p> // 子组件 : 全局定义 或者是在 父组件内定义均可 // 父组件里有很多数据[比如head,content] 需要从 父组件(调用)传递给子组件(定义), // 在这里加上组件模板 <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> Child = React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>({ render: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>() { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a></p> <div> <h1>标题: {<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.head}</h1> <h2>内容 :{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.content} </h2> </p></div> <p>; } });</p> <p>// <a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a> data = &quot;123&quot;; // var <a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a> = &quot;React&quot;;</p> <p> React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render( <HelloReact></HelloReact>, <a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.getElementById('app') );</p> <p> </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"build/react.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"build/react-<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"build/browser.m<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>/<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">var</span> HelloReact = React.create<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>({ <span class="hljs-comment">// propTypes :{</span> <span class="hljs-comment">// title: React.<a href="http://www.js-code.com/tag/prop" title="浏览关于“Prop”的文章" target="_blank" class="tag_link">Prop</a>Types.string.isRequired,</span> <span class="hljs-comment">// },</span> <span class="hljs-comment">// getDefaultProps : <a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a> () {</span> <span class="hljs-comment">// <a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a> {</span> <span class="hljs-comment">// name : " hello React"</span> <span class="hljs-comment">// };</span> <span class="hljs-comment">// },</span> <span class="hljs-comment">// 渲染的 <a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> 内容</span> render : <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.props.title} <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>{this.props.name}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Child</span> <span class="hljs-attr">head</span>=<span class="hljs-string">"我是标题1"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"我是内容1"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Child</span> <span class="hljs-attr">head</span>=<span class="hljs-string">"我是标题2"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"我是内容2"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">HelloMessage</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>; } }); // 子组件 : 全局定义 或者是在 父组件内定义均可 // 父组件里有很多数据[比如head,content] 需要从 父组件(调用)传递给子组件(定义), // 在这里加上组件模板 var Child = React.createClass({ render: function() { return<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>标题: {this.props.head}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>内容 :{this.props.content} <span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>; } }); // var data = "123"; // var name = "React"; React<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>.render( <span class="hljs-tag">&lt;<span class="hljs-name">HelloReact</span>/&gt;</span>, <a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a>.getElementById('app') ); </span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>以上的demo 的代码注释已经尽量详细,这里有个至今较为困惑的点:父子组件的关系明确;我的简单理解是;同一个的Child 组件 ,定义时,它为子组件,而在使用调用时,则为父组件; <strong>若有错误,欢迎大家的指正!</strong></p> <hr> <h4>写完demo,结合项目,开始改改改...</h4> <p>该项目属于老项目,现在的工作是在原来的基础上新增部分类似的功能板块,同时做相关的优化</p> <h4>项目<strong>组件文件夹</strong>的结构目录</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" app components ConsumeBill.jsx -----A 组件=demo中的HelloReact ChildBill.jsx ------Child 组件 .... ... ... " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs erlang"><code> app components ConsumeBill.jsx -----A 组件=demo中的HelloReact ChildBill.jsx ------Child 组件 .... ... ... </code></pre> <p>在A组件中需要引入Child 组件,在其 render方法中多次使用 Child组件 。[考虑代码阅读:将Child组件以外部文件的方式引入;若Child组件的<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 代码非常简短,可无需外部引入,同demo中类似直接放在<strong> A组件的React.createClass语句中</strong>] ;</p> <hr> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="继续先上demo:" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">继续先上demo:</code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>Title</title><br /> <script src=&quot;build/react.js&quot;></script><br /> <script src=&quot;build/react-dom.js&quot;></script><br /> <script src=&quot;build/browser.min.js&quot;></script><br /> </head><br /> <body></p> <div id=&quot;app&quot;></div> <p><script type=&quot;text/babel&quot;></p> <p> var HelloReact = React.createClass({</p> <p>// propTypes :{ // title: React.PropTypes.string.isRequired, // }, // getDefaultProps : <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> () { // <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> { // name : &quot; hello React&quot; // }; // },</p> <p> // 渲染的 HTML 内容, // 这里注意: JS语句 写在Hello<a href="http://www.js-code.com/tag/react%e7%bb%84%e4%bb%b6" title="React组件" target="_blank">React组件</a>中return [return 是React语句]外面,在HelloReact 组件的 **render方法**里面 render : function () { <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> datas1 = {head:&quot;我是标题1&quot;,content:&quot;我是内容1&quot;}; <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> datas2 = {head:&quot;我是标题2&quot;,content:&quot;我是内容2&quot;}; return</p> <div> <h1>{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.title}</p> <div> <h2>{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.name}</h2> </p></div> </h1> <p> <Child datas={datas1} ></Child> <Child datas={datas2}></Child> </div> <p>; } });</p> <p> // 子组件 : 全局定义 或者是在 父组件内定义均可 // 父组件里有很多数据[比如head,content] 需要从 父组件(调用)传递给子组件(定义), // 在这里加上组件模板</p> <p> var Child = React.createClass({</p> <p> render: function() { // ES6 语法对象解购赋值,可在Raect 语句中直接使用 head ,cotent <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> {head=&quot;&quot;, content=&quot;&quot;} = this.props.datas;</p> <p> return</p> <div> <h1>标题: {head}</h1> <h2>内容 :{content} </h2> </p></div> <p>; } });</p> <p> // var data = &quot;123&quot;; // var name = &quot;React&quot;;</p> <p> React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render( <HelloReact></HelloReact>, <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById('app') );</p> <p></script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"build/react.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"build/react-dom.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"build/browser.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> HelloReact = React.createClass({ <span class="hljs-comment">// propTypes :{</span> <span class="hljs-comment">// title: React.PropTypes.string.isRequired,</span> <span class="hljs-comment">// },</span> <span class="hljs-comment">// getDefaultProps : function () {</span> <span class="hljs-comment">// return {</span> <span class="hljs-comment">// name : " hello React"</span> <span class="hljs-comment">// };</span> <span class="hljs-comment">// },</span> <span class="hljs-comment">// 渲染的 HTML 内容,</span> <span class="hljs-comment">// 这里注意: JS语句 写在Hello<a href="http://www.js-code.com/tag/react%e7%bb%84%e4%bb%b6" title="浏览关于“React组件”的文章" target="_blank" class="tag_link">React组件</a>中return [return 是React语句]外面,在HelloReact 组件的 **render方法**里面</span> render : <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> datas1 = {head:<span class="hljs-string">"我是标题1"</span>,content:<span class="hljs-string">"我是内容1"</span>}; let datas2 = {head:<span class="hljs-string">"我是标题2"</span>,content:<span class="hljs-string">"我是内容2"</span>}; <span class="hljs-keyword">return</span>&lt;div&gt; &lt;h1&gt;{<span class="hljs-keyword">this</span>.props.title} &lt;div&gt; &lt;h2&gt;{<span class="hljs-keyword">this</span>.props.name}&lt;/h2&gt; &lt;/div&gt; &lt;/h1&gt; &lt;Child datas={datas1} /&gt; &lt;Child datas={datas2}/&gt; &lt;/div&gt;; } }); <span class="hljs-comment">// 子组件 : 全局定义 或者是在 父组件内定义均可</span> <span class="hljs-comment">// 父组件里有很多数据[比如head,content] 需要从 父组件(调用)传递给子组件(定义),</span> <span class="hljs-comment">// 在这里加上组件模板</span> <span class="hljs-keyword">var</span> Child = React.createClass({ render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-comment">// ES6 语法对象解购赋值,可在Raect 语句中直接使用 head ,cotent</span> let {head=<span class="hljs-string">""</span>, content=<span class="hljs-string">""</span>} = <span class="hljs-keyword">this</span>.props.datas; <span class="hljs-keyword">return</span>&lt;div&gt; &lt;h1&gt;标题: {head}&lt;/h1&gt; &lt;h2&gt;内容 :{content} &lt;/h2&gt; &lt;/div&gt;; } }); <span class="hljs-comment">// var data = "123";</span> <span class="hljs-comment">// var name = "React";</span> ReactDOM.render( &lt;HelloReact/&gt;, document.getElementById(<span class="hljs-string">'app'</span>) ); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p><strong><em>*注意: JS语句 写在Father组件中return [return 里是React语句]外面,在Father 组件的 </em></strong>render方法*里面</p> <hr> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="上面例子的demo:HelloReact 与 Child 组件是在同一文件(组件)内;外部引入呢?只要的Child部分代码 以外部文件引入则可,后续补充。 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>上面例子的demo:HelloReact 与 Child 组件是在同一文件(组件)内;外部引入呢?只要的Child部分代码 以外部文件引入则可,后续补充。 </code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过