プロパティ

プロパティは、子コンポーネントと親コンポーネントが相互に通信することを可能にします。すべてのコンポーネントには、親から渡される内容を記述する関連付けられたプロパティ型があります。理論的には、これは `Properties` トレイトを実装する任意の型にすることができますが、実際には、各フィールドがプロパティを表す構造体以外にする理由はありません。

derive マクロ

`Properties` トレイトを自分で実装する代わりに、`#[derive(Properties)]` を使用して実装を自動的に生成する必要があります。`Properties` を派生させる型は、`PartialEq` も実装する必要があります。

フィールド属性

`Properties` を派生させる場合、デフォルトですべてのフィールドが必要です。次の属性を使用すると、別の値に設定されていない限り使用される初期値をプロパティに指定できます。

ヒント

属性は Rustdoc で生成されたドキュメントには表示されません。プロパティのドキュメント文字列には、プロパティがオプションかどうか、および特別なデフォルト値があるかどうかを記載する必要があります。

`#[prop_or_default]`

`Default` トレイトを使用して、プロパティ値をフィールド型のデフォルト値で初期化します。

`#[prop_or(value)]`

`value` を使用してプロパティ値を初期化します。 `value` は、フィールドの型を返す任意の式にすることができます。たとえば、ブール値のプロパティを `true` にデフォルト設定するには、属性 `#[prop_or(true)]` を使用します。

`#[prop_or_else(function)]`

`function` を呼び出してプロパティ値を初期化します。 `function` は、`FnMut() -> T` というシグネチャを持つ必要があります。ここで、`T` はフィールド型です。

`PartialEq`

`Properties` には `PartialEq` の実装が必要です。これは、Yew が変更された場合にのみ `changed` メソッドを呼び出すことができるようにするためです。

プロパティを使用する際のメモリ/速度のオーバーヘッド

内部的には、プロパティは参照カウントされます。これは、コンポーネントツリーに渡されるのがプロパティのポインタだけであることを意味します。これにより、プロパティ全体をクローンするコストを節約できます。これは高価な場合があります。

ヒント

属性値を String やその他の同様の型として定義する代わりに、属性値のカスタム型である `AttrValue` を使用してください。

例

use yew::Properties;
/// Importing the AttrValue from virtual_dom
use yew::virtual_dom::AttrValue;

#[derive(Clone, PartialEq)]
pub enum LinkColor {
    Blue,
    Red,
    Green,
    Black,
    Purple,
}

fn create_default_link_color() -> LinkColor {
    LinkColor::Blue
}

#[derive(Properties, PartialEq)]
pub struct LinkProps {
    /// The link must have a target.
    href: AttrValue,
    /// Also notice that we are using AttrValue instead of String
    text: AttrValue,
    /// Color of the link. Defaults to `Blue`.
    #[prop_or_else(create_default_link_color)]
    color: LinkColor,
    /// The view function will not specify a size if this is None.
    #[prop_or_default]
    size: Option<u32>,
    /// When the view function does not specify active, it defaults to true.
    #[prop_or(true)]
    active: bool,
}

props マクロ

`yew::props!` マクロを使用すると、`html!` マクロと同じ方法でプロパティを構築できます。

マクロは構造体式と同じ構文を使用しますが、属性またはベース式（`Foo { ..base }`）は使用できません。型パスは、プロパティを直接指す（`path::to::Props`）か、コンポーネントの関連付けられたプロパティを指す（`MyComp::Properties`）ことができます。

use yew::{props, Properties, virtual_dom::AttrValue};

#[derive(Clone, PartialEq)]
pub enum LinkColor {
    Blue,
    Red,
    Green,
    Black,
    Purple,
}

fn create_default_link_color() -> LinkColor {
    LinkColor::Blue
}

#[derive(Properties, PartialEq)]
pub struct LinkProps {
    /// The link must have a target.
    href: AttrValue,
    /// Also notice that we're using AttrValue instead of String
    text: AttrValue,
    /// Color of the link. Defaults to `Blue`.
    #[prop_or_else(create_default_link_color)]
    color: LinkColor,
    /// The view function will not specify a size if this is None.
    #[prop_or_default]
    size: Option<u32>,
    /// When the view function doesn't specify active, it defaults to true.
    #[prop_or(true)]
    active: bool,
}

impl LinkProps {
    /// Notice that this function receives href and text as String
    /// We can use `AttrValue::from` to convert it to a `AttrValue`
    pub fn new_link_with_size(href: String, text: String, size: u32) -> Self {
        props! {LinkProps {
            href: AttrValue::from(href),
            text: AttrValue::from(text),
            size,
        }}
    }
}