Trait wasm_react::Component

source · [−]
pub trait Component: 'static {
    fn render(&self) -> VNode;

    fn key(self, key: Option<&str>) -> Keyed<'_, Self>
    where
        Self: Sized,
    { ... }
    fn build(self) -> VNode
    where
        Self: Sized,
    { ... }
    fn memoized(self) -> Memoized<Self>
    where
        Self: Sized + PartialEq,
    { ... }
}
Expand description

Implement this trait on a struct to create a component with the struct as props.

The props will be completely controlled by Rust, which makes rendering them relatively simple in Rust. However, since the props struct cannot be constructed in JS, these components cannot be exposed to JS. This means only components written in Rust can render a Component by default.

See export_components! for how to expose components for JS consumption.

Example

struct Counter(i32);

impl Component for Counter {
  fn render(&self) -> VNode {
    h!(div).build(c!["Counter: ", self.0])
  }
}

Required Methods

The render function.

Do not call this method in another render function. Instead, use Component::build() to include your component.

Provided Methods

Sets the React key.

Returns a VNode to be included in a render function.

Returns a memoized version of your component that skips rendering if props haven’t changed.

If your component renders the same result given the same props, you can memoize your component for a performance boost.

You have to implement PartialEq on your Component for this to work.

Example
#[derive(PartialEq)]
struct MessageBox {
  message: Rc<str>,
}

impl Component for MessageBox {
  fn render(&self) -> VNode {
    h!(h1[."message-box"]).build(c![&*self.message])
  }
}

struct App;

impl Component for App {
  fn render(&self) -> VNode {
    h!(div[#"app"]).build(c![
      MessageBox {
        message: Rc::from("Hello World!"),
      }
      .memoized()
      .build()
    ])
  }
}

Implementations on Foreign Types

Implementors