ReasonReact

ReasonReact

  • Docs
  • Try
  • Examples
  • Community
  • Blog
  • Languages iconEspañol
    • 日本語
    • English
    • Français
    • 한국어
    • Português (Brasil)
    • Русский
    • 中文
    • 繁體中文
    • Ayúdanos a traducir
  • GitHub

›Record API (deprecated)

Getting Started

  • What & Why
  • Installation
  • Intro Example

Core

  • Components
  • JSX (Version 3)
  • Event
  • Style
  • Router
  • Working with DOM
  • Refs in React

ReactJS Idioms Equivalents

  • Invalid Prop Name
  • Props Spread
  • Component as Prop
  • Ternary Shortcut
  • Context & Mixins
  • Custom Class/Component Property

Record API (deprecated)

  • JSX (Old, Version 2)
  • Creation, Props & Self
  • Render
  • Callback Handlers
  • State, Actions & Reducer
  • Lifecycles
  • Instance Variables
  • React Ref
  • Talk to Existing ReactJS Code
  • cloneElement
  • Children
  • Subscriptions Helper
  • Router

FAQ

  • I'm Having a Type Error
  • Record Field send/handle Not Found
  • send/handle callbacks having Incompatible Types
  • I Really Need Feature X From ReactJS
  • Element Type is Invalid Runtime Error
Translate

React Ref

The Record API is in feature-freeze. For the newest features and better support going forward, please consider migrating to the new function components.

No estes confundido con Reason ref, la función de idioma que permite la mutación.

El A ReasonReact ref sera solo otra variable de instancia. Usted escribiría como ReasonReact.reactRefsi se une a un componente personalizado, y Dom.element si se une a un elemento React DOM.

type state = {
  isOpen: bool,
  mySectionRef: ref(option(ReasonReact.reactRef))
};

let setSectionRef = (theRef, {ReasonReact.state}) => {
  state.mySectionRef := Js.Nullable.toOption(theRef);
  /* wondering about Js.Nullable.toOption? See the note below */
};

let component = ReasonReact.reducerComponent("MyPanel");

let make = (~className="", _children) => {
  ...component,
  initialState: () => {
    isOpen: false,
    mySectionRef: ref(None),
  },
  reducer: /* ... */,
  render: (self) => <Section1 ref={self.handle(setSectionRef)} />
};

Attaching to a React DOM element looks the same: state.mySectionRef = {myDivRef: Js.Nullable.toOption(theRef)}.

Nota como referencias ReactJS pueden ser nulas. Esa es la razón theRef y myDivRef se convierten a partir de una JS nullable en un OCaml opción (algunos/ningunos). ¡Cuando usted usa la referencia, Usted esta obligado a manejar el caso nulo a través de switch, que evita sutiles errores!

Usted debe seguir la convención de InstanceVars en le selección anterior para la referencia.

ReasonReact ref only accept callbacks. The string ref from ReactJS is deprecated.

We also expose an escape hatch ReasonReact.refToJsObj of type ReasonReact.reactRef => Js.t {..}, which turns your ref into a JS object you can freely use; this is only used to access ReactJS component class methods.

permita handleClick = (event, self) =>
  switch (self.state.mySectionRef^) {
  | None => ()
  | Some(r) => ReasonReact.refToJsObj(r)##someMethod(1, 2, 3) /* I solemnly swear that I am up to no good */
  };
← Instance VariablesTalk to Existing ReactJS Code →