mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
d77cf0196b
* Update CHANGELOG https://github.com/yewstack/yew/actions/runs/11314974928/job/31465588862 * Add items. * Write blog. * Archive the documents. * Add author. * Update SSR document. * Fix typo. * Add simplified Chinese translation. * Update package.json * Sync documents * Add traditional Chinese translation. * Sync documents * Add Japanese translation. * Sync documents * Fix typo by `fmt:write`. * Fix typo by `write-translations`. * Apply suggestions from code review * Fix typo. * #3769 in changelog --------- Co-authored-by: Elina <imelina@elina.website>
45 lines
938 B
Plaintext
45 lines
938 B
Plaintext
---
|
|
title: 'ジェネリックコンポーネント'
|
|
description: '関数コンポーネントの #[function_component] 属性'
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs'
|
|
import TabItem from '@theme/TabItem'
|
|
|
|
`#[function_component]` 属性は、ジェネリックコンポーネントを作成するためのジェネリック関数にも適用されます。
|
|
|
|
```rust
|
|
use std::fmt::Display;
|
|
use yew::{function_component, html, Properties, Html};
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct Props<T>
|
|
where
|
|
T: PartialEq,
|
|
{
|
|
data: T,
|
|
}
|
|
|
|
#[function_component]
|
|
pub fn MyGenericComponent<T>(props: &Props<T>) -> Html
|
|
where
|
|
T: PartialEq + Clone + Into<Html>,
|
|
{
|
|
html! {
|
|
<p>
|
|
{ props.data.clone().into() }
|
|
</p>
|
|
}
|
|
}
|
|
|
|
// その後、このように使用できます
|
|
html! {
|
|
<MyGenericComponent<i32> data=123 />
|
|
};
|
|
|
|
// または
|
|
html! {
|
|
<MyGenericComponent<String> data={"foo".to_string()} />
|
|
};
|
|
```
|