Mailspring/docs/InjectedComponent.html
2015-10-03 13:56:58 -07:00

63 lines
2.8 KiB
HTML

---
layout: docs
title: InjectedComponent
edit_url: "https://github.com/nylas/N1/blob/master/src/components/injected-component.cjsx"
---
<h2>Summary</h2>
<div class="markdown-from-sourecode">
<p><p>InjectedComponent makes it easy to include dynamically registered
components inside of your React render method. Rather than explicitly render
a component, such as a <code>&lt;Composer&gt;</code>, you can use InjectedComponent:</p>
<pre><code class="lang-coffee"><span class="hljs-tag">&lt;<span class="hljs-title">InjectedComponent</span> <span class="hljs-attribute">matching</span>=<span class="hljs-value">{role:"Composer"}</span> <span class="hljs-attribute">exposedProps</span>=<span class="hljs-value">{draftClientId:123}</span> /&gt;</span>
</code></pre>
<p>InjectedComponent will look up the component registered with that role in the
<a href='componentregistry.html'>ComponentRegistry</a> and render it, passing the exposedProps (<code>draftClientId={123}</code>) along.</p>
<p>InjectedComponent monitors the ComponentRegistry for changes. If a new component
is registered that matches the descriptor you provide, InjectedComponent will refresh.</p>
<p>If no matching component is found, the InjectedComponent renders an empty div.</p>
</p>
</div>
<ul>
</ul>
<h3>Class Properties</h3>
<h4 id=propTypes>propTypes <a href="#propTypes" class="link"></a></h4>
<p><p>React <code>props</code> supported by InjectedComponent:</p>
</p>
<table class="arguments">
<tr>
<td style="width:15%;">
<em>matching</em>
</td>
<td>
<p>Pass an <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object'>Object</a> with ComponentRegistry descriptors. This set of descriptors is provided to <a href='ComponentRegistry.html#findComponentsForDescriptor'>ComponentRegistry::findComponentsForDescriptor</a> to retrieve the component that will be displayed.</p>
</td>
</tr>
<tr>
<td style="width:15%;">
<em>className</em>
</td>
<td>
<span class="optional">Optional</span>
<p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string'>String</a> class name for the containing element.</p>
</td>
</tr>
<tr>
<td style="width:15%;">
<em>exposedProps</em>
</td>
<td>
<span class="optional">Optional</span>
<p>An <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object'>Object</a> with props that will be passed to each item rendered into the set.</p>
</td>
</tr>
</table>