Ich habe Probleme bei der Integration von react-System-Benachrichtigungsmodul in meiner App, nachdem ich die Dokumentation über Reason React Ref gelesen habe Ich bin mir nicht sicher, warum die Referenz nicht den Stapel weitergegeben wird; Ein Hinweis würde sehr geschätzt werden.Wie definiert man die Komponente/Bindung, wenn React ref in Reasonml verwendet wird?
Ich bekomme den Fehler unten, ich habe diese Komponente in der Vergangenheit in React verwendet, aber es scheint, dass es ein Problem bei der Verwendung in ReasonML/React gibt. Ich vermute, dass eine Nullreferenz übergeben wird, die die Komponente bricht.
Elementtyp ist ungültig: ein String erwartet (für eingebaute Komponenten) oder eine Klasse/Funktion (für Composite-Bauteile) bekam aber: undefined. Sie haben wahrscheinlich vergessen, Ihre Komponente aus der Datei zu exportieren, in der sie definiert ist, , oder Sie haben standardmäßige und benannte Importe verwechselt.
Überprüfen Sie die Rendermethode
Notifications
.
Bindung:
module NotificationSystem = {
[@bs.module "react-notification-system"] external reactClass : ReasonReact.reactClass = "default";
let make = (children) =>
ReasonReact.wrapJsForReason(
~reactClass,
~props=Js.Obj.empty(),
children
)
};
Komponente
type action =
| AddNotification(string);
type state = {
_notificationSystem: ref(option(ReasonReact.reactRef)),
};
let setNotificationSystemRef = (notificationRef, {ReasonReact.state: state}) =>
state._notificationSystem := Js.toOption(notificationRef) ;
let component = ReasonReact.reducerComponent("Notifications");
let addNotification = (message, state) => {
switch state._notificationSystem^ {
| None =>()
| Some(r) => ReasonReact.refToJsObj(r)##addNotification({"message": message, "level": "success"});
}
};
let make = (_children) => {
...component,
initialState:() => {_notificationSystem: ref(None) },
reducer: (action, state) =>
switch action {
| AddNotification(message) => ReasonReact.SideEffects(((_) => addNotification(message, state)))
},
render: ({handle, reduce}) => (
<div>
<NotificationSystem ref=(handle(setNotificationSystemRef)) />
<button onClick=(reduce((_) => AddNotification("Test Notification Test"))) > (ReasonReact.stringToElement("Click")) </button>
</div>
)
};
Dank für den Zeiger:
Eine vollständige Probe Arbeitsprojekt kann auf Github here werden! – user465374