mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-06 08:08:10 +08:00
48 lines
2.1 KiB
HTML
48 lines
2.1 KiB
HTML
---
|
|
layout: docs
|
|
title: UnsafeComponent
|
|
edit_url: "https://github.com/nylas/N1/blob/master/src/components/unsafe-component.cjsx"
|
|
---
|
|
|
|
<h2>Summary</h2>
|
|
|
|
<div class="markdown-from-sourecode">
|
|
<p><p>Renders a component provided via the <code>component</code> prop, and ensures that
|
|
failures in the component's code do not cause state inconsistencies elsewhere in
|
|
the application. This component is used by <a href='injectedcomponent.html'>InjectedComponent</a> and
|
|
<a href='injectedcomponentset.html'>InjectedComponentSet</a> to isolate third party code that could be buggy.</p>
|
|
<p>Occasionally, having your component wrapped in <a href='unsafecomponent.html'>UnsafeComponent</a> can cause style
|
|
issues. For example, in a Flexbox, the <code>div.unsafe-component-wrapper</code> will cause
|
|
your <code>flex</code> and <code>order</code> values to be one level too deep. For these scenarios,
|
|
UnsafeComponent looks for <code>containerStyles</code> on your React component and attaches
|
|
them to the wrapper div:</p>
|
|
<pre><code class="lang-coffee"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>
|
|
</span> <span class="hljs-annotation">@displayName</span>: <span class="hljs-symbol">'MyComponen</span>t'
|
|
<span class="hljs-annotation">@containerStyles</span>:
|
|
flex: <span class="hljs-number">1</span>
|
|
order: <span class="hljs-number">2</span>
|
|
</code></pre>
|
|
</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 UnsafeComponent:</p>
|
|
</p>
|
|
<table class="arguments">
|
|
<tr>
|
|
<td style="width:15%;">
|
|
<em>component</em>
|
|
</td>
|
|
<td>
|
|
|
|
<p>The <a href='https://facebook.github.io/react/docs/component-api.html'>React.Component</a> to display. All other props will be passed on to this component.</p>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|