バージョン: 0.21

プロパティ

注記

プロパティはしばしば "Props" と略されます。

プロパティは、基本的に Yew が監視できるコンポーネントの引数です。

型は、コンポーネントのプロパティとして使用される前に、`Properties` トレイトを実装する必要があります。

リアクティビティ

Yew は、再レンダリング中に仮想 DOM を調整する際に、プロパティが変更されたかどうかをチェックし、ネストされたコンポーネントを再レンダリングする必要があるかどうかを判断します。このように、Yew は非常に反応性の高いフレームワークとみなすことができます。親からの変更は常に下方向に伝播され、ビューはプロパティ/状態からのデータと同期しなくなることはありません。

ヒント

まだチュートリアルを完了していない場合は、試してみて、このリアクティビティを自分でテストしてみてください。

derive マクロ

Yew は、構造体で `Properties` トレイトを簡単に実装するための derive マクロを提供しています。

`Properties` を derive する型は、Yew がデータ比較を行うことができるように、`PartialEq` も実装する必要があります。

use yew::Properties;

#[derive(Properties, PartialEq)]
pub struct Props {
    pub is_loading: bool,
}

関数コンポーネントでの使用

属性 `#[function_component]` を使用すると、オプションで関数引数で Props を受け取ることができます。それらを供給するには、`html!` マクロの属性を介して割り当てられます。

Props あり
Props なし

use yew::{function_component, html, Html, Properties};

#[derive(Properties, PartialEq)]
pub struct Props {
    pub is_loading: bool,
}

#[function_component]
fn HelloWorld(props: &Props) -> Html {
    html! { <>{"Am I loading? - "}{props.is_loading.clone()}</> }
}

// Then supply the prop
#[function_component]
fn App() -> Html {
    html! {<HelloWorld is_loading={true} />}
}

use yew::{function_component, html, Html};

#[function_component]
fn HelloWorld() -> Html {
    html! { "Hello world" }
}

// No props to supply
#[function_component]
fn App() -> Html {
    html! {<HelloWorld />}
}

derive マクロのフィールド属性

`Properties` を derive する場合、デフォルトではすべてのフィールドが必要です。次の属性を使用すると、親が設定していない場合に使用されるデフォルト値をプロパティに指定できます。

ヒント

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

#[prop_or_default]
#[prop_or(値)]
#[prop_or_else(関数)]

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

use yew::{function_component, html, Html, Properties};

#[derive(Properties, PartialEq)]
pub struct Props {
    #[prop_or_default]
    pub is_loading: bool,
}

#[function_component]
fn HelloWorld(props: &Props) -> Html {
    if props.is_loading.clone() {
        html! { "Loading" }
    } else {
        html! { "Hello world" }
    }
}

// Then use like this with default
#[function_component]
fn Case1() -> Html {
    html! {<HelloWorld />}
}
// Or no override the default
#[function_component]
fn Case2() -> Html {
    html! {<HelloWorld is_loading={true} />}
}

プロパティ値を初期化するには、`値` を使用します。 `値` は、フィールドの型を返す任意の式にすることができます。たとえば、ブール値のプロパティをデフォルトで `true` にするには、属性 `#[prop_or(true)]` を使用します。式は、プロパティが構築され、明示的な値が指定されていない場合に評価されます。

use yew::{function_component, html, Html, Properties};

#[derive(Properties, PartialEq)]
pub struct Props {
    #[prop_or("Bob".to_string())]
    pub name: String,
}

#[function_component]
fn HelloWorld(props: &Props) -> Html {
    html! {<>{"Hello world"}{props.name.clone()}</>}
}

// Then use like this with default
#[function_component]
fn Case1() -> Html {
    html! {<HelloWorld />}
}
// Or no override the default
#[function_component]
fn Case2() -> Html {
    html! {<HelloWorld name={"Sam".to_string()} />}
}

プロパティ値を初期化するには、`関数` を呼び出します。 `関数` は、`FnMut() -> T` というシグネチャを持つ必要があります。ここで、`T` はフィールドの型です。関数は、その属性に明示的な値が指定されていない場合に呼び出されます。

use yew::{function_component, html, Html, Properties};

fn create_default_name() -> String {
    "Bob".to_string()
}

#[derive(Properties, PartialEq)]
pub struct Props {
    #[prop_or_else(create_default_name)]
    pub name: String,
}

#[function_component]
fn HelloWorld(props: &Props) -> Html {
    html! {<>{"Hello world"}{props.name.clone()}</>}
}

// Then use like this with default
#[function_component]
fn Case1() -> Html {
    html! {<HelloWorld />}
}
// Or no override the default
#[function_component]
fn Case2() -> Html {
    html! {<HelloWorld name={"Sam".to_string()} />}
}