64 lines
21 KiB
HTML
64 lines
21 KiB
HTML
<!DOCTYPE html> <html lang="en-US"> <head prefix="og:http://ogp.me/ns#"> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="mobile-web-app-capable" content="yes" /> <meta name="p:domain_verify" content="74b28158c46b8035f8f4a5ba032e51b2" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="application-name" content="Klise Theme" /> <meta name="apple-mobile-web-app-status-bar-style" content="#fff" /> <meta name="apple-mobile-web-app-title" content="Klise Theme" /> <title> React Component with Dot Notation - Klise Theme </title> <link rel="alternate" href="http://localhost:4000/react-component-with-dot-notation/" hreflang="en-US" /> <link rel="canonical" href="http://localhost:4000/react-component-with-dot-notation/" /> <meta name="description" content="Learn how to define a React component that is accessible through the dot notation. A common component pattern to show a parent-child relation." /> <meta name="referrer" content="no-referrer-when-downgrade" /> <meta property="fb:app_id" content="" /> <meta property="og:site_name" content="React Component with Dot Notation | username" /> <meta property="og:title" content="React Component with Dot Notation | username" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://localhost:4000/react-component-with-dot-notation/" /> <meta property="og:description" content="Learn how to define a React component that is accessible through the dot notation. A common component pattern to show a parent-child relation." /> <meta property="og:image" content="http://localhost:4000/assets/img/ogp.png" /> <meta property="og:image:width" content="640" /> <meta property="og:image:height" content="640" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="React Component with Dot Notation | username" /> <meta name="twitter:url" content="http://localhost:4000/react-component-with-dot-notation/" /> <meta name="twitter:site" content="@username" /> <meta name="twitter:creator" content="@username" /> <meta name="twitter:description" content="Learn how to define a React component that is accessible through the dot notation. A common component pattern to show a parent-child relation." /> <meta name="twitter:image" content="http://localhost:4000/assets/img/ogp.png" /> <link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Klise Theme" /> <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/android-chrome-96x96.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png" /> <link rel="manifest" href="/assets/favicons/site.webmanifest" /> <link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5" /> <meta name="apple-mobile-web-app-title" content="Mahendrata" /> <meta name="application-name" content="Mahendrata" /> <meta name="msapplication-TileColor" content="#da532c" /> <meta name="theme-color" content="#2c2c2c" /> <link rel="stylesheet" href="/assets/css/style.css" /> </head> <body> <header class="navbar" role="navigation"> <nav class="menu"> <input type="checkbox" id="menu-trigger" class="menu-trigger" /> <label for="menu-trigger"> <span class="menu-icon"> <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><path d='M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z'/></svg> </span> </label> <a id="mood"> <svg class="mood-sunny" xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><title>LIGHT</title><line x1='256' y1='48' x2='256' y2='96' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='256' y1='416' x2='256' y2='464' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='108.92' x2='369.14' y2='142.86' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='369.14' x2='108.92' y2='403.08' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='464' y1='256' x2='416' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='96' y1='256' x2='48' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='403.08' x2='369.14' y2='369.14' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='142.86' x2='108.92' y2='108.92' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><circle cx='256' cy='256' r='80' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg> <svg class="mood-moon" xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><title>DARK</title><line x1='256' y1='48' x2='256' y2='96' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='256' y1='416' x2='256' y2='464' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='108.92' x2='369.14' y2='142.86' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='369.14' x2='108.92' y2='403.08' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='464' y1='256' x2='416' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='96' y1='256' x2='48' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='403.08' x2='369.14' y2='369.14' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='142.86' x2='108.92' y2='108.92' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><circle cx='256' cy='256' r='80' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg> </a> <div class="trigger"> <div class="trigger-container"> <a class="menu-link" href="/">home</a> <a class="menu-link" href="/about/">about</a> <a class="menu-link" href="/notes/">notes</a> <a class="menu-link rss" href="/feed.xml"> <svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 512 512' fill='#ED812E'><title>RSS</title><path d='M108.56,342.78a60.34,60.34,0,1,0,60.56,60.44A60.63,60.63,0,0,0,108.56,342.78Z'/><path d='M48,186.67v86.55c52,0,101.94,15.39,138.67,52.11s52,86.56,52,138.67h86.66C325.33,312.44,199.67,186.67,48,186.67Z'/><path d='M48,48v86.56c185.25,0,329.22,144.08,329.22,329.44H464C464,234.66,277.67,48,48,48Z'/></svg> </a> </div> </nav> </header> <div class="wrapper post"> <main class="page-content" aria-label="Content"> <article itemscope itemtype="https://schema.org/BlogPosting"> <header class="header"> <div class="tags"> <span itemprop="keywords"> <a class="tag" href="/tags/#javascript">JAVASCRIPT</a>, <a class="tag" href="/tags/#react">REACT</a> </span> </div> <h1 class="header-title" itemprop="headline">React Component with Dot Notation</h1> <div class="post-meta"> <time datetime="2018-04-07T23:04:00+07:00" itemprop="datePublished"> Apr 07, 2018 </time> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span itemprop="name">Klisé Theme</span> </span> <time hidden datetime="" itemprop="dateModified"> Apr 07, 2018 </time> <span hidden itemprop="publisher" itemtype="Person">Klisé Theme</span> <span hidden itemprop="image"></span> <span hidden itemprop="mainEntityOfPage"><h5 id="this-article-is-for-demo-purpose">This article is for Demo purpose</h5> </span> </div> </header> <div class="page-content" itemprop="articleBody"> <h5 id="this-article-is-for-demo-purpose"> This article is for Demo purpose </h5> <p>The article was originally on <a href="https://github.com/risan/risanb.com/blob/master/content/posts/react-component-with-dot-notation/index.md">this repo</a></p> <p>This is my answer to someone’s question on <a href="https://stackoverflow.com/questions/49256472/react-how-to-extend-a-component-that-has-child-components-and-keep-them/49258038#answer-49258038">StackOverflow</a>. How can we define a React component that is accessible through the dot notation?</p> <p>Take a look at the following code. We have the <code class="highlighter-rouge">Menu</code> component and its three children <code class="highlighter-rouge">Menu.Item</code>:</p> <div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span>
|
||
<span class="p"><</span><span class="nc">Menu</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>Home<span class="p"></</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>Blog<span class="p"></</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>About<span class="p"></</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nc">Menu</span><span class="p">></span>
|
||
<span class="p">);</span>
|
||
</code></pre></div></div> <p>How can we define a component like <code class="highlighter-rouge">Menu</code>? Where it has some kind of “sub-component” that is accessible through a dot notation.</p> <p>Well, it’s actually a pretty common pattern. And it’s not really a sub-component, it’s just another component being attached to another one.</p> <p>Let’s use the above <code class="highlighter-rouge">Menu</code> component for example. We’ll put this component to its own dedicated file: <code class="highlighter-rouge">menu.js</code>. First, let’s define these two components separately on this module file:</p> <div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// menu.js</span>
|
||
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||
|
||
<span class="k">export</span> <span class="kd">const</span> <span class="nx">MenuItem</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">children</span> <span class="p">})</span> <span class="o">=></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span><span class="si">{</span><span class="nx">children</span><span class="si">}</span><span class="p"></</span><span class="nt">li</span><span class="p">>;</span>
|
||
|
||
<span class="k">export</span> <span class="k">default</span> <span class="kd">const</span> <span class="nx">Menu</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">children</span> <span class="p">})</span> <span class="o">=></span> <span class="p"><</span><span class="nt">ul</span><span class="p">></span><span class="si">{</span><span class="nx">children</span><span class="si">}</span><span class="p"></</span><span class="nt">ul</span><span class="p">>;</span>
|
||
</code></pre></div></div> <p>It’s just a simple functional component. The <code class="highlighter-rouge">Menu</code> is the parent with <code class="highlighter-rouge">ul</code> tag. And the <code class="highlighter-rouge">MenuItem</code> will act as its children. Now we can use these two components like so:</p> <div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||
<span class="k">import</span> <span class="p">{</span> <span class="nx">render</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
|
||
<span class="k">import</span> <span class="nx">Menu</span><span class="p">,</span> <span class="p">{</span> <span class="nx">MenuItem</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"./menu"</span><span class="p">;</span>
|
||
|
||
<span class="kd">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span>
|
||
<span class="p"><</span><span class="nc">Menu</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nc">MenuItem</span><span class="p">></span>Home<span class="p"></</span><span class="nc">MenuItem</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nc">MenuItem</span><span class="p">></span>Blog<span class="p"></</span><span class="nc">MenuItem</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nc">MenuItem</span><span class="p">></span>About<span class="p"></</span><span class="nc">MenuItem</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nc">Menu</span><span class="p">></span>
|
||
<span class="p">);</span>
|
||
|
||
<span class="nx">render</span><span class="p">(<</span><span class="nc">App</span> <span class="p">/>,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"root"</span><span class="p">));</span>
|
||
</code></pre></div></div> <p>Where’s the dot notation? To make our <code class="highlighter-rouge">MenuItem</code> component accessible through the dot nation, we can simply attach it to the <code class="highlighter-rouge">Menu</code> component as a static property. To do so, we can no longer use the functional component for <code class="highlighter-rouge">Menu</code> and switch to the class component instead:</p> <div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// menu.js</span>
|
||
<span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="k">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
||
|
||
<span class="k">export</span> <span class="k">default</span> <span class="kd">const</span> <span class="nx">MenuItem</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">children</span> <span class="p">})</span> <span class="o">=></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span><span class="si">{</span><span class="nx">children</span><span class="si">}</span><span class="p"></</span><span class="nt">li</span><span class="p">>;</span>
|
||
|
||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">Menu</span> <span class="kd">extends</span> <span class="nx">Component</span> <span class="p">{</span>
|
||
<span class="kr">static</span> <span class="nx">Item</span> <span class="o">=</span> <span class="nx">MenuItem</span><span class="p">;</span>
|
||
|
||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="k">return</span> <span class="p">(</span>
|
||
<span class="p"><</span><span class="nt">ul</span><span class="p">></span><span class="si">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="si">}</span><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
<span class="p">);</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span>
|
||
</code></pre></div></div> <p>Now we can use the dot notation to declare the <code class="highlighter-rouge">MenuItem</code> component:</p> <div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||
<span class="k">import</span> <span class="p">{</span> <span class="nx">render</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"react-dom"</span><span class="p">;</span>
|
||
<span class="k">import</span> <span class="nx">Menu</span> <span class="k">from</span> <span class="s2">"./menu"</span><span class="p">;</span>
|
||
|
||
<span class="kd">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span>
|
||
<span class="p"><</span><span class="nc">Menu</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>Home<span class="p"></</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>Blog<span class="p"></</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>About<span class="p"></</span><span class="nc">Menu</span><span class="p">.</span><span class="nc">Item</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nc">Menu</span><span class="p">></span>
|
||
<span class="p">);</span>
|
||
|
||
<span class="nx">render</span><span class="p">(<</span><span class="nc">App</span> <span class="p">/>,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"root"</span><span class="p">));</span>
|
||
</code></pre></div></div> <p>You can also put the <code class="highlighter-rouge">MenuItem</code> component definition directly within the <code class="highlighter-rouge">Menu</code> class. But this way you can no longer import <code class="highlighter-rouge">MenuItem</code> individually.</p> <div class="language-jsx highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="k">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||
|
||
<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">Menu</span> <span class="kd">extends</span> <span class="nx">Component</span> <span class="p">{</span>
|
||
<span class="kr">static</span> <span class="nx">Item</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">children</span> <span class="p">})</span> <span class="o">=></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span><span class="si">{</span><span class="nx">children</span><span class="si">}</span><span class="p"></</span><span class="nt">li</span><span class="p">>;</span>
|
||
|
||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="k">return</span> <span class="p"><</span><span class="nt">ul</span><span class="p">></span><span class="si">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="si">}</span><span class="p"></</span><span class="nt">ul</span><span class="p">>;</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span>
|
||
</code></pre></div></div> <h5 id="this-article-is-for-demo-purpose-1"> This article is for Demo purpose </h5> <p>The article was originally on <a href="https://github.com/risan/risanb.com/blob/master/content/posts/react-component-with-dot-notation/index.md">this repo</a></p> </div> </article> </main> <nav class="post-nav"> <a class="post-nav-item post-nav-next" href="/python-notes-from-Intro-to-machine-learning/"> <div class="nav-arrow">Next</div> <span class="post-title">Python Notes from Intro to Machine Learning</span> </a> </nav> </div> <footer class="footer"> <a class="footer_item" href="/thanks">ack.</a> <a class="footer_item" href="/resume">resume</a> <a class="footer_item" href="/feed.xml">rss</a> <span class="footer_item">© 2020</span> <small class="footer_theme-copyright"> <!-- Klisé Theme: https://github.com/piharpi/jekyll-klise --> <a href="https://github.com/piharpi/jekyll-klise" target="_blank">klisé</a> theme on <a href="https://jekyllrb.com" target="_blank">jekyll</a> </small> </footer> <script src="/assets/js/main.js" defer="defer"></script> <script src="/assets/js/galite.js"></script> <script> var galite = galite || {}; galite.UA = ""; </script> </body> </html>
|