Füge benutzerdefinierte Requisiten zu einer benutzerdefinierten Komponente hinzu
Ich habe meine eigene angepasste Popover-Komponente für das React-Bootstrap erstellt:
export default class MyPopover extends Component {
// ...
render() {
return (
<Popover {...this.props} >
// ....
</Popover>
);
}
}
Die Komponente wird folgendermaßen gerendert:
// ... my different class ...
render() {
const popoverExample = (
<MyPopover id="my-first-popover" title="My Title">
my text
</MyPopover >
);
return (
<OverlayTrigger trigger="click" placement="top" overlay={popoverExample}>
<Button>Click Me</Button>
</OverlayTrigger>
);
}
Nun, ich möchte @ benutzerdefinierte Requisiten hinzufügMyPopover
-Komponente wie diese: mein Text Und um die neuen Requisiten zu verwenden, um einige Dinge im Popover einzustellen, zum Beispiel -
<Popover {...this.props} className={this.getClassName()}>
{this.showTheRightText(this.props)}
</Popover>
aber dann bekomme ich diese Warnung im Browser:
Warnung: Unbekannte RequisitenpopoverType
am Tag. Entfernen Sie diese Requisiten aus dem Element.
Now, ich denke, ich kann nur das @ entfern{...this.props}
Teil und füge alle originalen Requisiten nacheinander ohne die benutzerdefinierten Requisiten ein, aber auf diese Weise verliere ich den "Fade" -Effekt und es ist auch eine hässliche Art, mit diesem Problem umzugehen. Gibt es eine einfachere Möglichkeit?