mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Paul O’Shannessy
577 lines
29 KiB
HTML
577 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<!--[if IE]><![endif]-->
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<title>Riferimenti ai Componenti | React</title>
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta property="og:title" content="Riferimenti ai Componenti | React">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://facebook.github.io/react/docs/more-about-refs-it-IT.html">
|
||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||
<meta property="fb:app_id" content="623268441017527">
|
||
|
||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||
<link rel="stylesheet" href="/react/css/react.css">
|
||
|
||
<script src="//use.typekit.net/vqa1hcx.js"></script>
|
||
<script>try{Typekit.load();}catch(e){}</script>
|
||
|
||
<!--[if lte IE 8]>
|
||
<script src="/react/js/html5shiv.min.js"></script>
|
||
<script src="/react/js/es5-shim.min.js"></script>
|
||
<script src="/react/js/es5-sham.min.js"></script>
|
||
<![endif]-->
|
||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
||
<script src="/react/js/codemirror.js"></script>
|
||
<script src="/react/js/javascript.js"></script>
|
||
<script src="/react/js/react.js"></script>
|
||
<script src="/react/js/react-dom.js"></script>
|
||
<script src="/react/js/babel-browser.min.js"></script>
|
||
<script src="/react/js/live_editor.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
|
||
<div class="nav-main">
|
||
<div class="wrap">
|
||
<a class="nav-home" href="/react/index.html">
|
||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||
React
|
||
</a>
|
||
<ul class="nav-site nav-site-internal">
|
||
<li><a href="/react/docs/getting-started.html" class="active">Docs</a></li>
|
||
<li><a href="/react/support.html">Support</a></li>
|
||
<li><a href="/react/downloads.html">Download</a></li>
|
||
<li><a href="/react/blog/">Blog</a></li>
|
||
<li>
|
||
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
|
||
</li>
|
||
</ul>
|
||
|
||
<ul class="nav-site nav-site-external">
|
||
<li><a href="https://github.com/facebook/react">GitHub</a></li>
|
||
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<section class="content wrap documentationContent">
|
||
<div class="nav-docs">
|
||
<!-- Docs Nav -->
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Quick Start</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Community Resources</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/conferences.html">Conferences</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/videos.html">Videos</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://github.com/facebook/react/wiki/Complementary-Tools" class="external">Complementary Tools</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://github.com/facebook/react/wiki/Examples" class="external">Examples</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Guides</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/why-react.html">Why React?</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/forms.html">Forms</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/more-about-refs.html">Refs to Components</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/animation.html">Animation</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/clone-with-props.html">Cloning Elements</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/create-fragment.html">Keyed Fragments</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/shallow-compare.html">Shallow Compare</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/context.html">Context</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Reference</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/component-api.html">Component API</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/events.html">Event System</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/webcomponents.html">Web Components</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Flux</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="https://facebook.github.io/flux/docs/overview.html" class="external">Flux Overview</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://facebook.github.io/flux/docs/todo-list.html" class="external">Flux TodoMVC Tutorial</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<!-- Tips Nav -->
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Tips</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/tips/introduction.html">Introduction</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="inner-content">
|
||
<h1>
|
||
Riferimenti ai Componenti
|
||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/08.1-more-about-refs.it-IT.md" target="_blank">Edit on GitHub</a>
|
||
</h1>
|
||
<div class="subHeader"></div>
|
||
|
||
<p>Dopo aver costruito il tuo componente, potresti trovarti nella situazione di volere invocare dei metodi sulle istanze di componenti restituite da <code>render()</code>. Nella maggior parte dei casi, questo non è necessario poiché il flusso di dati reattivo assicura sempre che le proprietà più recenti siano assegnate a ciascun figlio prodotto da <code>render()</code>. Tuttavia, esistono dei casi in cui potrebbe essere necessario o desiderabile, quindi React fornisce una via d'uscita conosciuta come <code>refs</code>. Queste <code>refs</code> (riferimenti) sono particolarmente utili quando vuoi: trovare il markup DOM prodotto da un componente (ad esempio, per posizionarlo in modo assoluto), usare componenti React in una più ampia applicazione non-React, oppure effettuare la transizione del tuo codice a React.</p>
|
||
|
||
<p>Vediamo come ottenere un ref, e quindi passiamo ad un esempio completo.</p>
|
||
<h2><a class="anchor" name="il-ref-restituito-da-reactdom.render"></a>Il ref restituito da ReactDOM.render <a class="hash-link" href="#il-ref-restituito-da-reactdom.render">#</a></h2>
|
||
<p>Da non confondersi con il metodo <code>render()</code> che definisci sul tuo componente (il quale restituisce un elemento DOM virtuale), <a href="/react/docs/top-level-api-it-IT.html#reactdom.render">ReactDOM.render()</a> restituisce un riferimento all'<strong>istanza di supporto</strong> del tuo componente (o <code>null</code> per i <a href="/react/docs/reusable-components.html#stateless-functions">componenti privi di stato</a>).</p>
|
||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myComponent</span> <span class="o">=</span> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span> <span class="o">/></span><span class="p">,</span> <span class="nx">myContainer</span><span class="p">);</span>
|
||
</code></pre></div>
|
||
<p>Tieni a mente, tuttavia, che JSX non restituisce un'istanza di un componente! È solo un <strong>ReactElement</strong>: una rappresentazione leggera che istruisce React su come il componente montato debba apparire.</p>
|
||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myComponentElement</span> <span class="o">=</span> <span class="o"><</span><span class="nx">MyComponent</span> <span class="o">/></span><span class="p">;</span> <span class="c1">// Questo è un semplice ReactElement.</span>
|
||
|
||
<span class="c1">// Qui va del codice...</span>
|
||
|
||
<span class="kd">var</span> <span class="nx">myComponentInstance</span> <span class="o">=</span> <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">myComponentElement</span><span class="p">,</span> <span class="nx">myContainer</span><span class="p">);</span>
|
||
<span class="nx">myComponentInstance</span><span class="p">.</span><span class="nx">doSomething</span><span class="p">();</span>
|
||
</code></pre></div>
|
||
<blockquote>
|
||
<p>Nota:</p>
|
||
|
||
<p>Questo deve essere usato soltanto al livello più alto. All'interno dei componenti, lascia che i tuoi <code>props</code> e <code>state</code> gestiscano la comunicazione con i componenti figli, oppure utilizza uno degli altri metodi per ottenere un ref (attributo stringa o callback).</p>
|
||
</blockquote>
|
||
<h2><a class="anchor" name="lattributo-ref-come-callback"></a>L'Attributo ref Come Callback <a class="hash-link" href="#lattributo-ref-come-callback">#</a></h2>
|
||
<p>React supporta un attributo speciale che puoi assegnare a qualsiasi componente. L'attributo <code>ref</code> può essere una funzione callback, che sarà eseguita immediatamente dopo che il componente viene montato. Il componente referenziato sarà passato come parametro, e la funzione callback può utilizzare il componente immediatamente, oppure conservarne un riferimento per un uso successivo, o entrambe.</p>
|
||
|
||
<p>È semplice come aggiungere un attributo <code>ref</code> a qualsiasi cosa restituita da <code>render</code> usando una funzione freccia di ES6:</p>
|
||
<div class="highlight"><pre><code class="language-js" data-lang="js"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="k">return</span> <span class="p">(</span>
|
||
<span class="o"><</span><span class="nx">TextInput</span>
|
||
<span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="kd">function</span><span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="nx">input</span> <span class="o">!=</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">input</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}}</span> <span class="o">/></span>
|
||
<span class="p">);</span>
|
||
<span class="p">},</span>
|
||
</code></pre></div>
|
||
<p>oppure usando una funzione freccia ES6:</p>
|
||
<div class="highlight"><pre><code class="language-js" data-lang="js"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="k">return</span> <span class="o"><</span><span class="nx">TextInput</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{(</span><span class="nx">c</span><span class="p">)</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">_input</span> <span class="o">=</span> <span class="nx">c</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||
<span class="p">},</span>
|
||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">_input</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
|
||
<span class="p">},</span>
|
||
</code></pre></div>
|
||
<p>Nota che quando il componente referenziato viene smontato e quando il valore di ref cambia, ref sarà chiamata con <code>null</code> come argomento. Ciò impedisce i memory leak nel caso in cui l'istanza venga conservata, come nel primo esempio. Nota che quando assegni il valore di ref a un'espressione di funzione in linea come negli esempi precedenti, React vede un oggetto funzione diverso ogni volta e pertanto in occasione di ciascun aggiornamento, ref verrà chiamata con <code>null</code> immediatamente prima di essere chiamata con l'istanza del componente.</p>
|
||
|
||
<p>Puoi accedere al nodo DOM del componente direttamente chiamando <code>ReactDOM.findDOMNode(argomentoDellaTuaCallback)</code>.</p>
|
||
<h2><a class="anchor" name="lattributo-ref-come-stringa"></a>L'Attributo ref Come Stringa <a class="hash-link" href="#lattributo-ref-come-stringa">#</a></h2>
|
||
<p>React supporta anche l'uso di una stringa (anziché una callback) come proprietà ref su qualsiasi componente, sebbene allo stato attuale questo approccio sia quasi esclusivamente superato.</p>
|
||
|
||
<ol>
|
||
<li><p>Assegna un attributo <code>ref</code> a qualsiasi cosa restituita da <code>render</code> come:</p>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">ref=</span><span class="s">"myInput"</span> <span class="nt">/></span>
|
||
</code></pre></div></li>
|
||
<li><p>Altrove nel codice (tipicamente in un gestore di eventi), accedi all'<strong>istanza di supporto</strong> tramite <code>this.refs</code> come segue:</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">myInput</span>
|
||
</code></pre></div></li>
|
||
</ol>
|
||
|
||
<p>Puoi accedere direttamente al nodo DOM del componente chiamando <code>ReactDOM.findDOMNode(this.refs.myInput)</code>.</p>
|
||
<h2><a class="anchor" name="un-esempio-completo"></a>Un Esempio Completo <a class="hash-link" href="#un-esempio-completo">#</a></h2>
|
||
<p>Per ottenere un riferimento a un componente React, puoi usare <code>this</code> per ottenere il componente React attuale, oppure usare un ref per ottenere un riferimento a un componente di tua proprietà. Il funzionamento è il seguente:</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="c1">// Assegna il focus esplicitamente al campo di testo usando l'API DOM nativa.</span>
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">myTextInput</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
|
||
<span class="p">},</span>
|
||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="c1">// L'attributo ref aggiunge un riferimento al componente a this.refs quando</span>
|
||
<span class="c1">// il componente viene montato</span>
|
||
<span class="k">return</span> <span class="p">(</span>
|
||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{(</span><span class="nx">ref</span><span class="p">)</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">myTextInput</span> <span class="o">=</span> <span class="nx">ref</span><span class="p">}</span> <span class="o">/></span>
|
||
<span class="o"><</span><span class="nx">input</span>
|
||
<span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span>
|
||
<span class="nx">value</span><span class="o">=</span><span class="s2">"Assegna il focus al campo di testo"</span>
|
||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span>
|
||
<span class="o">/></span>
|
||
<span class="o"><</span><span class="err">/div></span>
|
||
<span class="p">);</span>
|
||
<span class="p">}</span>
|
||
<span class="p">});</span>
|
||
|
||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||
<span class="o"><</span><span class="nx">MyComponent</span> <span class="o">/></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="s1">'example'</span><span class="p">)</span>
|
||
<span class="p">);</span>
|
||
</code></pre></div>
|
||
<p>In questo esempio, otteniamo un riferimento all'<strong>istanza di supporto</strong> del campo di testo e vi invochiamo il metodo <code>focus()</code> quando il bottone viene cliccato.</p>
|
||
|
||
<p>Per componenti compositi, il riferimento si riferisce a un'istanza della classe del componente, quindi puoi invocare ogni metodo definito in tale classe. Se devi accedere al nodo DOM sottostante per il componente, puoi usare <a href="/react/docs/top-level-api-it-IT.html#reactdom.finddomnode">ReactDOM.findDOMNode</a>.</p>
|
||
<h2><a class="anchor" name="riassunto"></a>Riassunto <a class="hash-link" href="#riassunto">#</a></h2>
|
||
<p>I riferimenti <code>ref</code> sono la maniera corretta di inviare un messaggio a una precisa istanza di un figlio in una maniera che sarebbe impraticabile attraverso le normali proprietà <code>props</code> e <code>state</code> di React. Tuttavia, esse non dovrebbero essere la tua astrazione principale per far fluire i dati attraverso la tua applicazione. In modo predefinito, usa il flusso dati di React e utilizza i <code>ref</code> per casi d'uso che sono intrinsecamente non reattivi.</p>
|
||
<h3><a class="anchor" name="benefici"></a>Benefici: <a class="hash-link" href="#benefici">#</a></h3>
|
||
<ul>
|
||
<li>Puoi definire ogni metodo pubblico nelle classi dei tuoi componenti (come un metodo per reimpostare un Typeahead) e chiamare tali metodi pubblici attraverso i riferimenti (come ad esempio <code>this.refs.myTypeahead.reset()</code>).</li>
|
||
<li>Effettuare misure sul DOM richiede quasi sempre l'accesso ad un componente "nativo" come <code><input /></code> accedendo il suo nodo DOM sottostante attraverso <code>ReactDOM.findDOMNode(this.refs.myInput)</code>. I riferimenti sono uno degli unici metodi praticabili per fare ciò in maniera affidabile.</li>
|
||
<li>I riferimenti sono gestiti automaticamente per te! Se un figlio è distrutto, anche il suo riferimento è distrutto. Pertanto non preoccuparti del consumo di memoria (a meno che tu non faccia qualcosa di folle per conservare un riferimento).</li>
|
||
</ul>
|
||
<h3><a class="anchor" name="precauzioni"></a>Precauzioni: <a class="hash-link" href="#precauzioni">#</a></h3>
|
||
<ul>
|
||
<li><em>Non accedere mai</em> ai riferimenti dentro il metodo render di un componente - oppure mentre il metodo render di qualsiasi componente è in esecuzione ovunque nella pila di chiamate.</li>
|
||
<li>Se vuoi preservare la resilienza al Crushing del compilatore Google Closure Compiler, assicurati di non accedere mai come proprietà a ciò che è stato specificato come stringa. Ciò significa che devi accedere come <code>this.refs['myRefString']</code> se il tuo ref è stato definito come <code>ref="myRefString"</code>.</li>
|
||
<li>Se non hai ancora programmato parecchie applicazioni con React, la tua prima inclinazione è solitamente di provare a utilizzare i riferimenti per "fare succedere qualcosa" nella tua applicazione. Se questo è il tuo caso, fermati un momento e pensa in maniera critica al luogo corretto nella gerarchia dei componenti in cui lo <code>state</code> debba trovarsi. Spesso ti accorgerai che il luogo corretto per "possedere" lo stato si trova a un livello più alto nella gerarchia. Posizionare lì lo stato spesso elimina ogni necessità di usare i <code>ref</code> per "fare accadere qualcosa" – al contrario, il flusso dei dati solitamente otterrà lo scopo desiderato.</li>
|
||
<li>I ref non possono essere assegnati a <a href="/react/docs/reusable-components-it-IT.html#stateless-functions">funzioni prive di stato</a>, poiché il componente non possiede un'istanza di supporto. Puoi tuttavia racchiudere un componente privo di stato in un componente composito standard e assegnare il ref al componente composito.</li>
|
||
</ul>
|
||
|
||
|
||
<div class="docs-prevnext">
|
||
|
||
<a class="docs-prev" href="/react/docs/working-with-the-browser-it-IT.html">← Prev</a>
|
||
|
||
|
||
<a class="docs-next" href="/react/docs/tooling-integration-it-IT.html">Next →</a>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<footer class="wrap">
|
||
<div class="left">
|
||
A Facebook & Instagram collaboration.<br>
|
||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||
</div>
|
||
<div class="right">
|
||
© 2013–2016 Facebook Inc.<br>
|
||
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<div id="fb-root"></div>
|
||
|
||
<script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
||
ga('send', 'pageview');
|
||
|
||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||
|
||
(function(d, s, id) {
|
||
var js, fjs = d.getElementsByTagName(s)[0];
|
||
if (d.getElementById(id)) return;
|
||
js = d.createElement(s); js.id = id;
|
||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||
fjs.parentNode.insertBefore(js, fjs);
|
||
}(document, 'script', 'facebook-jssdk'));
|
||
|
||
docsearch({
|
||
apiKey: '36221914cce388c46d0420343e0bb32e',
|
||
indexName: 'react',
|
||
inputSelector: '#algolia-doc-search'
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|