mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Dan Abramov
589 lines
30 KiB
HTML
589 lines
30 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>API di Livello Elevato | React</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta property="og:title" content="API di Livello Elevato | React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://facebook.github.io/react/docs/top-level-api-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/xml.js"></script>
|
|
<script src="/react/js/jsx.js"></script>
|
|
<script src="/react/js/react.js"></script>
|
|
<script src="/react/js/react-dom.js"></script>
|
|
<script src="/react/js/babel.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>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/language-tooling.html">Language Tooling</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/package-management.html">Package Management</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/environments.html">Server-side Environments</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</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>
|
|
|
|
|
|
<!-- 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>
|
|
|
|
|
|
<!-- Contributing Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Contributing</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/contributing/how-to-contribute.html">How to Contribute</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/codebase-overview.html">Codebase Overview</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/design-principles.html">Design Principles</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="inner-content">
|
|
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/ref-01-top-level-api.it-IT.md" target="_blank">Edit on GitHub</a>
|
|
<h1>
|
|
API di Livello Elevato
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
|
|
<p><code>React</code> è il punto di ingresso alla libreria React. Se stai usando uno dei pacchetti precompilati, è disponibile come variabile globale; se stai usando i moduli CommonJS puoi richiederlo con <code>require()</code>.</p>
|
|
<h3><a class="anchor" name="react.component"></a>React.Component <a class="hash-link" href="#react.component">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Component</span>
|
|
</code></pre></div>
|
|
<p>Questa è la classe base per i componenti React quando sono definiti usando le classi ES6. Vedi <a href="/react/docs/reusable-components.html#es6-classes">Componenti Riutilizzabili</a> per usare le classi ES6 con React. Per i metodi forniti dalla classe base, vedi la <a href="/react/docs/component-api.html">API dei Componenti</a>.</p>
|
|
<h3><a class="anchor" name="react.createclass"></a>React.createClass <a class="hash-link" href="#react.createclass">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactClass</span> <span class="nx">createClass</span><span class="p">(</span><span class="nx">object</span> <span class="nx">specification</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Crea la classe di un componente, data una specifica. Un componente implementa un metodo <code>render</code> che restituisce <strong>un singolo</strong> figlio. Tale figlio può avere una struttura di fogli arbitrariamente profonda. Una cosa che rende i componenti diversi dalle classi prototipiche standard è che non hai bisogno di chiamare <code>new</code> su di esse. Sono delle convenienti astrazioni che costruiscono (attraverso <code>new</code>) istanze dietro le quinte per te.</p>
|
|
|
|
<p>Per maggiori informazioni sull'oggetto specifica, vedi <a href="/react/docs/component-specs.html">Specifiche dei Componenti e Ciclo di Vita</a>.</p>
|
|
<h3><a class="anchor" name="react.createelement"></a>React.createElement <a class="hash-link" href="#react.createelement">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactElement</span> <span class="nx">createElement</span><span class="p">(</span>
|
|
<span class="nx">string</span><span class="o">/</span><span class="nx">ReactClass</span> <span class="nx">type</span><span class="p">,</span>
|
|
<span class="p">[</span><span class="nx">object</span> <span class="nx">props</span><span class="p">],</span>
|
|
<span class="p">[</span><span class="nx">children</span> <span class="p">...]</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Crea e restituisce un nuovo <code>ReactElement</code> del tipo desiderato. L'argomento <code>type</code> può essere una stringa contenente il nome di un tag HTML (ad es. 'div', 'span', etc), oppure una <code>ReactClass</code> (creata attraverso <code>React.createClass</code>).</p>
|
|
<h3><a class="anchor" name="react.cloneelement"></a>React.cloneElement <a class="hash-link" href="#react.cloneelement">#</a></h3><div class="highlight"><pre><code class="language-text" data-lang="text">ReactElement cloneElement(
|
|
ReactElement element,
|
|
[object props],
|
|
[children ...]
|
|
)
|
|
</code></pre></div>
|
|
<p>Clona e restituisce un nuovo <code>ReactElement</code> usando <code>element</code> come punto di partenza. L'elemento risultante avrà le proprietà dell'elemento originale, con le nuove proprietà unite in maniera superficiale. I figli esistenti sono sostituiti dai figli passati come <code>children</code>. Diversamente da <code>React.addons.cloneWithProps</code>, <code>key</code> e <code>ref</code> dell'elemento originale saranno preservati. Non esiste alcun comportamento speciale per riunire le proprietà (diversamente da <code>cloneWithProps</code>). Vedi l'<a href="/react/blog/2015/03/03/react-v0.13-rc2.html">articolo del blog sulla v0.13 RC2</a> per maggiori dettagli.</p>
|
|
<h3><a class="anchor" name="react.createfactory"></a>React.createFactory <a class="hash-link" href="#react.createfactory">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">factoryFunction</span> <span class="nx">createFactory</span><span class="p">(</span>
|
|
<span class="nx">string</span><span class="o">/</span><span class="nx">ReactClass</span> <span class="nx">type</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Restituisce una funzione che produce ReactElements di un tipo desiderato. Come <code>React.createElement</code>,
|
|
l'argomento <code>type</code> può essere sia la stringa contenente il nome di un tag HTML (ad es. 'div', 'span', etc), oppure una
|
|
<code>ReactClass</code>.</p>
|
|
<h3><a class="anchor" name="reactdom.render"></a>ReactDOM.render <a class="hash-link" href="#reactdom.render">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">render</span><span class="p">(</span>
|
|
<span class="nx">ReactElement</span> <span class="nx">element</span><span class="p">,</span>
|
|
<span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">,</span>
|
|
<span class="p">[</span><span class="kd">function</span> <span class="nx">callback</span><span class="p">]</span>
|
|
<span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Effettua il rendering di un ReactElement nel DOM all'interno dell'elemento <code>container</code> fornito e restituisce un <a href="/react/docs/more-about-refs-it-IT.html">riferimento</a> al componente (oppure restituisce <code>null</code> per i <a href="/react/docs/reusable-components-it-IT.html#stateless-functions">componenti privi di stato</a>).</p>
|
|
|
|
<p>Se il rendering del ReactElement è stato precedentemente effettuato all'interno di <code>container</code>, questa operazione effettuerà un aggiornamento su di esso e modificherà il DOM in modo necessario a riflettere il più recente componente React.</p>
|
|
|
|
<p>Se la callback opzionale è fornita, sarà eseguita dopo che il rendering o l'aggiornamento del componente sono stati effettuati.</p>
|
|
|
|
<blockquote>
|
|
<p>Nota:</p>
|
|
|
|
<p><code>ReactDOM.render()</code> controlla i contenuti del nodo contenitore che viene passato come argomento <code>container</code>. Gli elementi DOM
|
|
esistenti al suo interno sono sostituiti quando viene chiamata la prima volta. Le chiamate successive usano l'algoritmo di
|
|
differenza di React per aggiornamenti efficienti.</p>
|
|
|
|
<p><code>ReactDOM.render()</code> non modifica il nodo contenitore (modifica soltanto i figli del contenitore). In
|
|
futuro potrebbe essere possibile inserire un componente in un nodo DOM esistente senza sovrascrivere i figli esistenti.</p>
|
|
</blockquote>
|
|
<h3><a class="anchor" name="reactdom.unmountcomponentatnode"></a>ReactDOM.unmountComponentAtNode <a class="hash-link" href="#reactdom.unmountcomponentatnode">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">unmountComponentAtNode</span><span class="p">(</span><span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Rimuove un componente React montato nel DOM e ripulisce i suoi gestori di evento e lo stato. Se nessun componente è stato montato nel contenitore <code>container</code>, chiamare questa funzione non ha alcun effetto. Restituisce <code>true</code> se il componente è stato smontato e <code>false</code> se non è stato trovato un componente da smontare.</p>
|
|
<h3><a class="anchor" name="reactdom.rendertostring"></a>ReactDOM.renderToString <a class="hash-link" href="#reactdom.rendertostring">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">renderToString</span><span class="p">(</span><span class="nx">ReactElement</span> <span class="nx">element</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Effettua il rendering di un ReactElement come il suo HTML iniziale. Questo dovrebe essere utilizzato soltanto lato server. React restituirà una stringa di HTML. Puoi usare questo metodo per generare HTML sul server e inviare il markup come risposta alla richiesta iniziale per un più rapido caricamento della pagina, e permettere ai motori di ricerca di effettuare il crawling della tua pagina per ottimizzazione SEO.</p>
|
|
|
|
<p>Se chiami <code>ReactDOM.render()</code> su un nodo che possiede già questo markup generato lato server, React lo preserverà e vi attaccherà soltanto i gestori di eventi, permettendoti di avere una esperienza di primo caricamento altamente efficiente.</p>
|
|
<h3><a class="anchor" name="reactdom.rendertostaticmarkup"></a>ReactDOM.renderToStaticMarkup <a class="hash-link" href="#reactdom.rendertostaticmarkup">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">renderToStaticMarkup</span><span class="p">(</span><span class="nx">ReactElement</span> <span class="nx">element</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Simile a <code>renderToString</code>, eccetto che non crea attributi DOM aggiuntivi come <code>data-react-id</code>, che React utilizza internamente. Questo è utile se vuoi usare React come un semplice generatore di pagine statiche, in quanto eliminare gli attributi aggiuntivi può risparmiare parecchi byte.</p>
|
|
<h3><a class="anchor" name="reactdom.isvalidelement"></a>ReactDOM.isValidElement <a class="hash-link" href="#reactdom.isvalidelement">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isValidElement</span><span class="p">(</span><span class="o">*</span> <span class="nx">object</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Verifica che <code>object</code> sia un ReactElement.</p>
|
|
<h3><a class="anchor" name="reactdom.finddomnode"></a>ReactDOM.findDOMNode <a class="hash-link" href="#reactdom.finddomnode">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">DOMElement</span> <span class="nx">findDOMNode</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">component</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Se questo componente è stato montato nel DOM, restituisce il corrispondente elemento DOM nativo del browser. Questo metodo è utile per leggere i valori dal DOM, come i valori dei campi dei moduli ed effettuare misure sul DOM. Quando <code>render</code> restituisce <code>null</code> o <code>false</code>, <code>findDOMNode</code> restituisce <code>null</code>.</p>
|
|
|
|
<blockquote>
|
|
<p>Nota:</p>
|
|
|
|
<p><code>findDOMNode()</code> è una via di fuga usata per accedere al nodo DOM sottostante. Nella maggior parte dei casi, l'uso di questa via di fuga è scoraggiato perché viola l'astrazione del componente. Tuttavia, esistono delle situazioni in cui questo è necessario (ad esempio, potresti aver bisogno di trovare un nodo DOM per posizionarlo in maniera assoluta oppure determinarne la larghezza visualizzata misurata in pixel).</p>
|
|
|
|
<p><code>findDOMNode()</code> funziona soltanto su componenti montati (cioè, componenti che sono stati posizionati nel DOM). Se provi a chiamarlo su un componente che non è stato ancora montato (come chiamare <code>findDOMNode()</code> in <code>render()</code> su un componente che deve ancora essere creato) lancerà un'eccezione.</p>
|
|
</blockquote>
|
|
<h3><a class="anchor" name="react.dom"></a>React.DOM <a class="hash-link" href="#react.dom">#</a></h3>
|
|
<p><code>React.DOM</code> fornisce convenienti utilità che espongono <code>React.createElement</code> per componenti del DOM. Questi dovrebbero essere usate soltanto quando non si utilizza JSX. Ad esempio, <code>React.DOM.div(null, 'Ciao Mondo!')</code></p>
|
|
<h3><a class="anchor" name="react.proptypes"></a>React.PropTypes <a class="hash-link" href="#react.proptypes">#</a></h3>
|
|
<p><code>React.PropTypes</code> include tipi che possono essere usati con l'oggetto <code>propTypes</code> di un componente per validare le proprietà passate ai tuoi componenti. Per maggiori informazioni su <code>propTypes</code>, vedi <a href="/react/docs/reusable-components.html">Componenti Riutilizzabili</a>.</p>
|
|
<h3><a class="anchor" name="react.children"></a>React.Children <a class="hash-link" href="#react.children">#</a></h3>
|
|
<p><code>React.Children</code> fornisce utilitià per gestire la struttura dati opaca <code>this.props.children</code>.</p>
|
|
<h4><a class="anchor" name="react.children.map"></a>React.Children.map <a class="hash-link" href="#react.children.map">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">fn</span> <span class="p">[,</span> <span class="nx">object</span> <span class="nx">thisArg</span><span class="p">])</span>
|
|
</code></pre></div>
|
|
<p>Invoca <code>fn</code> su ciascuno dei diretti discendenti contenuti in <code>children</code>, con <code>this</code> impostato a <code>thisArg</code>. Se <code>children</code> è un oggetto annidato o un array, esso verrà attraversato: ad <code>fn</code> non saranno mai passati gli oggetti contenitori. Se <code>children</code> è <code>null</code> o <code>undefined</code> restituisce <code>null</code> o <code>undefined</code> anziché un oggetto vuoto.</p>
|
|
<h4><a class="anchor" name="react.children.foreach"></a>React.Children.forEach <a class="hash-link" href="#react.children.foreach">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">fn</span> <span class="p">[,</span> <span class="nx">object</span> <span class="nx">thisArg</span><span class="p">])</span>
|
|
</code></pre></div>
|
|
<p>Come <code>React.Children.map()</code> con la differenza che non restituisce un oggetto.</p>
|
|
<h4><a class="anchor" name="react.children.count"></a>React.Children.count <a class="hash-link" href="#react.children.count">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">number</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">count</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Restituisce il numero totale di componenti in <code>children</code>, uguale al numero di volte che una callback passata a <code>map</code> o <code>forEach</code> verrebbe invocata.</p>
|
|
<h4><a class="anchor" name="react.children.only"></a>React.Children.only <a class="hash-link" href="#react.children.only">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">only</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>Restituisce il figlio unico contenuto in <code>children</code>, altrimenti lancia un'eccezione.</p>
|
|
|
|
|
|
<div class="docs-prevnext">
|
|
|
|
|
|
<a class="docs-next" href="/react/docs/component-api-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/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'facebook-jssdk'));
|
|
|
|
docsearch({
|
|
apiKey: '36221914cce388c46d0420343e0bb32e',
|
|
indexName: 'react',
|
|
inputSelector: '#algolia-doc-search'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|