Reactjs Vererbung

Question

Ich bin sehr neu zu reagieren und ich versuche, eine einfache Anwendung, die HTML-Steuerelemente rendert machen.

Ich möchte eine API haben, die Anordnung von JSON-Objekte zurückgeben enthält Eigenschaften, die den Typ und den Wert jeder Steuer wie id, Typ, Wert zu bestimmen ... etc.

Lasst uns sagen, dass ich ein paar Kontrollen haben wie Eingabe und Button.

Was ich denke, ist Erstellen einer Basisklasse namens HtmlControl, die React.Component erweitert und andere HTML-Steuerelemente sollten aus dem HtmlControl und schließlich eine Klasse zum Rendern dieser Steuerelemente erweitern.

Wie kann ich die Steuerelemente, die nur HtmlControl-Klasse erweitert rendern?

Answer 1

Das wäre keine gute Wahl, da die Antwort besagt, dass Sie die Vererbung nicht fokussieren sollten, sondern sich auf die Eindämmung oder Zusammensetzung konzentrieren sollten.

React verfügt über ein leistungsstarkes Kompositionsmodell, und wir empfehlen die Verwendung von Komposition anstelle von Vererbung, um Code zwischen Komponenten wiederzuverwenden.

und

Bei Facebook verwenden wir Reagieren in Tausenden von Komponenten, und wir haben keine Anwendungsfälle gefunden, wo wir Komponente Erbe zu schaffen Hierarchien empfehlen würden.

Requisiten und Zusammensetzung bieten Ihnen alle Flexibilität, die Sie benötigen, um das Aussehen und Verhalten einer Komponente auf explizite und sichere Weise anzupassen. Denken Sie daran, dass Komponenten beliebige Props annehmen können, einschließlich primitiver Werte, React-Elemente oder Funktionen.

Bitte Visit this link, um mehr zu erfahren.

können Sie separate Klassen erstellen für jede der Komponenten oder Elemente und sie in einer Klasse wie folgt kombiniert werden:

import Button from './Button' 
import Radio from './Radio' 
import TextInput from './TextInput' 

class HtmlComponent{ 
// note: we don't need to extend it from React.Component 
// we will some function to render them. 

renderTextInput() { <TextInput /> } 
renderRadio() { <Radio /> } 
} 

// you can now use below code: 
const hC = new HtmlComponent(); 
hC.renderTextInput(); 

Hinweis Auch dies ist keine gute Idee zu tun, aber Sie können Ihr Ziel erreichen .