Reagieren Sie auf Komponenten von Drittanbietern im nativen Stil, indem Sie Wrapper hinzufügen
Meine Frage:
Ich versuche, der von „react-native-popup-menu“ bereitgestellten Komponente meine eigenen Stile hinzuzufügen und sie meiner Komponentenbibliothek hinzuzufügen. Sie stellen Menu-, MenuOptions- und MenuOption-Komponenten mit der folgenden erwarteten Hierarchie bereit:
<Menu>
<MenuOptions>
<MenuOption text="A">
</MenuOption>
<MenuOption text="B">
</MenuOption>
</MenuOptions>
</Menu>
Ich habe vor, für jedes Element einen Wrapper zu erstellen, die darin enthaltene Komponente zu formatieren und den Wrapper zurückzugeben, wenn ihn jemand aus der Komponentenbibliothek importiert.
Zum Beispiel ein Wrapper für die Menükomponente:
import { MenuProps } from 'react-native-popup-menu';
type CustomMenuProps = {
children: React.ReactElement[];
}
const CustomMenu = (props: MenuProps && CustomMenuProps) => {
return <Menu style={{...someCustomStyle}}>{children}</Menu>
}
Dadurch wird auf jeder Ebene ein Wrapper (ein zusätzliches Element) hinzugefügt, was zu der folgenden Hierarchie führt:
<CustomMenu>
<Menu>
<CustomMenuOptions>
<MenuOptions>...
Dem Paket gefällt das nicht, weil es auf Hierarchie angewiesen ist, um das Menü korrekt anzuzeigen. Löst den Fehler „MenuOptions sollte ein untergeordnetes Element von Menu sein“ aus
Gibt es eine Möglichkeit, ein benutzerdefiniertes Menü zu erstellen und es als Komponente in der Komponentenbibliothek verfügbar zu machen? Wenn es reagieren würde, würde ich die CSS-Klasse neu schreiben, aber in React-Native gibt es keinen Kaskadeneffekt.
Jeder Hinweis wäre sehr hilfreich. Danke.
