Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Component<Attrs, State>

The Component class defines a user interface 'building block'. A component generates a virtual DOM to be rendered on each redraw.

Essentially, this is a wrapper for Mithril's components that adds several useful features:

  • In the oninit and onbeforeupdate lifecycle hooks, we store vnode attrs in `this.attrs. This allows us to use attrs across components without having to pass the vnode to every single method.
  • The static initAttrs method allows a convenient way to provide defaults (or to otherwise modify) the attrs that have been passed into a component.
  • When the component is created in the DOM, we store its DOM element under this.element; this lets us use jQuery to modify child DOM state from internal methods via the this.$() method.
  • A convenience component method, which serves as an alternative to hyperscript and JSX.

As with other Mithril components, components extending Component can be initialized and nested using JSX, hyperscript, or a combination of both. The component method can also be used.

example

return m('div',

Hello World

);

example

return m('div', MyComponent.component({foo: 'bar'), m('p', 'Hello World!'));

see

https://mithril.js.org/components.html

Type parameters

Hierarchy

Implements

  • ClassComponent<Attrs>

Index

Constructors

constructor

  • new Component<Attrs, State>(): Component<Attrs, State>

Properties

Protected attrs

attrs: Attrs

The attributes passed into the component.

see

https://mithril.js.org/components.html#passing-data-to-components

Protected element

element: Element

The root DOM element for the component.

Protected state

state: State

Class component state that is persisted between redraws.

Updating this will not automatically trigger a redraw, unlike other frameworks.

This is different to Vnode state, which is always an instance of your class component.

This is undefined by default.

Methods

Protected $

  • Returns a jQuery object for this component's element. If you pass in a selector string, this method will return a jQuery object, using the current element as its buffer.

    For example, calling component.$('li') will return a jQuery object containing all of the li elements inside the DOM element of this component.

    final

    Parameters

    • Optional selector: string

    Returns JQuery<HTMLElement>

    the jQuery object for the DOM node

onbeforeremove

  • onbeforeremove(vnode: VnodeDOM<Attrs, Component<Attrs, State>>): void

onbeforeupdate

  • onbeforeupdate(vnode: VnodeDOM<Attrs, Component<Attrs, State>>): void

oncreate

  • oncreate(vnode: VnodeDOM<Attrs, Component<Attrs, State>>): void

oninit

  • oninit(vnode: Vnode<Attrs, Component<Attrs, State>>): void

onremove

  • onremove(vnode: VnodeDOM<Attrs, Component<Attrs, State>>): void

onupdate

  • onupdate(vnode: VnodeDOM<Attrs, Component<Attrs, State>>): void

Private setAttrs

  • setAttrs(attrs?: Attrs): void
  • Saves a reference to the vnode attrs after running them through initAttrs, and checking for common issues.

    Parameters

    • attrs: Attrs = ...

    Returns void

Abstract view

  • view(vnode: Vnode<Attrs, Component<Attrs, State>>): Children

Static component

  • component<SAttrs>(attrs?: SAttrs, children?: Children): Vnode<{}, {}>

Static Protected initAttrs

  • initAttrs<T>(attrs: T): void
  • Initialize the component's attrs.

    This can be used to assign default values for missing, optional attrs.

    Type parameters

    • T

    Parameters

    • attrs: T

    Returns void

Generated using TypeDoc version 0.22.10