mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-01 13:14:16 +08:00
97 lines
4.2 KiB
HTML
97 lines
4.2 KiB
HTML
---
|
|
layout: docs
|
|
title: InjectedComponentSet
|
|
edit_url: "https://github.com/nylas/N1/blob/master/src/components/injected-component-set.cjsx"
|
|
---
|
|
|
|
<h2>Summary</h2>
|
|
|
|
<div class="markdown-from-sourecode">
|
|
<p><p>InjectedComponent makes it easy to include a set of dynamically registered
|
|
components inside of your React render method. Rather than explicitly render
|
|
an array of buttons, for example, you can use InjectedComponentSet:</p>
|
|
<pre><code class="lang-coffee"><InjectedComponentSet className=<span class="hljs-string">"message-actions"</span>
|
|
matching={<span class="hljs-string">role:</span> <span class="hljs-string">'ThreadActionButton'</span>}
|
|
exposedProps={<span class="hljs-string">thread:</span><span class="hljs-annotation">@props</span>.thread, <span class="hljs-string">message:</span><span class="hljs-annotation">@props</span>.message}>
|
|
</code></pre>
|
|
<p>InjectedComponentSet will look up components registered for the location you provide,
|
|
render them inside a <a href='flexbox.html'>Flexbox</a> and pass them <code>exposedProps</code>. By default, all injected
|
|
children are rendered inside <a href='unsafecomponent.html'>UnsafeComponent</a> wrappers to prevent third-party code
|
|
from throwing exceptions that break React renders.</p>
|
|
<p>InjectedComponentSet monitors the ComponentRegistry for changes. If a new component
|
|
is registered into the location you provide, InjectedComponentSet will re-render.</p>
|
|
<p>If no matching components is found, the InjectedComponent renders an empty span.</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 InjectedComponentSet:</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 components for display.</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>children</em>
|
|
</td>
|
|
<td>
|
|
<span class="optional">Optional</span>
|
|
<p>Any React elements rendered inside the InjectedComponentSet will always be displayed.</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>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>containersRequired</em>
|
|
</td>
|
|
<td>
|
|
<span class="optional">Optional</span>
|
|
<p>. Pass false to optionally remove the containers placed around injected components to isolate them from the rest of the app.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em></em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>Any other props you provide, such as <code>direction</code>, <code>data-column</code>, etc. will be applied to the <a href='flexbox.html'>Flexbox</a> rendered by the InjectedComponentSet.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|