Ich bin immer noch ein Neuling bei React und in vielen Beispielen im Internet sehe ich diese Variation beim Rendern von untergeordneten Elementen, die ich verwirrend finde. Normalerweise sehe ich das:
class Users extends React.Component {
render() {
return (
<div>
<h2>Users</h2>
{this.props.children}
</div>
)
}
}
Aber dann sehe ich ein Beispiel wie dieses:
<ReactCSSTransitionGroup
component="div"
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
{React.cloneElement(this.props.children, {
key: this.props.location.pathname
})}
</ReactCSSTransitionGroup>
Jetzt verstehe ich die API, aber die Dokumente machen nicht genau klar, wann ich sie verwenden sollte.
Was macht einer, was der andere nicht kann? Könnte mir das jemand mit besseren Beispielen erklären?
Antworten:
Bearbeiten:
Schauen Sie sich stattdessen Vennesas Antwort an, was eine bessere Erklärung ist.
Original:
Erstens
React.cloneElement
funktioniert das Beispiel nur, wenn Ihr Kind ein einzelnes React-Element ist.Denn fast alles
{this.props.children}
ist das, was Sie wollen. Das Klonen ist in einigen fortgeschritteneren Szenarien nützlich, in denen ein übergeordnetes Element ein Element einsendet und die untergeordnete Komponente einige Requisiten für dieses Element ändern oder Dinge wie ref für den Zugriff auf das eigentliche DOM-Element hinzufügen muss.Im obigen Beispiel weiß das übergeordnete Element, das das untergeordnete Element angibt, nichts über die Schlüsselanforderung für die Komponente. Daher erstellt es eine Kopie des angegebenen Elements und fügt einen Schlüssel hinzu, der auf einer eindeutigen Kennung im Objekt basiert. Weitere Informationen zu den Funktionen des Schlüssels: https://facebook.github.io/react/docs/multiple-components.html
quelle
props.children
sind nicht die eigentlichen Kinder; Es ist dasdescriptor
der Kinder. Sie haben also eigentlich nichts zu ändern; Sie können keine Requisiten ändern oder Funktionen bearbeiten. du kannst nurread from it
. Wenn Sie Änderungen vornehmen müssen Sie erstellennew elements
mitReact.CloneElement
.https://egghead.io/lessons/react-use-react-cloneelement-to-extend-functionality-of-children-components
Ein Beispiel:
Hauptrenderfunktion einer Komponente wie
App.js
:Nehmen wir jetzt an, Sie müssen
onClick
jedem Kind von ein hinzufügenParagraph
. So könnenParagraph.js
Sie in Ihrem tun:dann können Sie einfach Folgendes tun:
Hinweis: Die
React.Children.map
Funktion sieht nur dietop level
Elemente. Sie sieht nichts, was diese Elemente rendern. Dies bedeutet, dass Sie die direkten Requisiten für Kinder bereitstellen (hier die<Sentence />
Elemente). Wenn Sie möchten, dass die Requisiten weiter weitergegeben werden, nehmen wir an, Sie haben ein<div></div>
inneres<Sentence />
Element, das dieonClick
Requisite verwenden möchte. In diesem Fall können Sie das verwenden,Context API
um dies zu tun. Machen Sie denParagraph
Anbieter und dieSentence
Elemente zum Verbraucher.quelle
React.Children.map
in Verbindung mit,React.cloneElement
wie @vennesa hervorhebt, ist sehr mächtigIn der Tat
React.cloneElement
ist nicht streng mit verbundenthis.props.children
.Dies ist immer dann nützlich, wenn Sie React Elements (
PropTypes.element
) klonen müssen, um Requisiten hinzuzufügen / zu überschreiben, ohne dass der Elternteil Kenntnisse über diese Komponenteninternale haben soll (z. B. Anhängen von Ereignishandlern oder Zuweisen vonkey
/ref
Attributen).Auch Reaktionselemente sind unveränderlich .
Die
children
Requisite in React wird jedoch speziell für die Eindämmung (auch als Komposition bezeichnet ), die Kopplung mit derReact.Children
API und fürReact.cloneElement
Komponenten verwendet , die Requisiten verwenden. Kinder können intern mehr Logik (z. B. Zustandsübergänge, Ereignisse, DOM-Messungen usw.) verarbeiten, während der Rendering-Teil an ausgegeben wird Überall dort, wo es verwendet wird, sind React Router<switch/>
oder Compound-Komponenten<select/>
einige gute Beispiele.Eine letzte erwähnenswerte Sache ist, dass Reaktionselemente nicht auf Requisiten beschränkt sind.
Sie können , was Requisiten , die Sinn macht, ist der Schlüssel war ein guter Vertrag für die Komponente zu definieren, so dass die Verbraucher davon kann aus den zugrunde liegenden Implementierungsdetails entkoppelt werden, unabhängig davon , ob es mit
React.Children
,React.cloneElement
oder sogarReact.createContext
.quelle