用于 cercis 包的宏

cargo add cercis

仅与 cercis 包一起使用

使用示例

更多示例，请参阅 cercis

空组件

所有数据都是通过引用传递到组件的

use cercis::prelude::*;

fn main() {
  let page = rsx!(div {
    MyComponent {}
  });

  // output: <div><h1>my component</h1></div>
  println!("{}", page.render())
}

#[component]
fn MyComponent() -> Element {
    rsx!(h1 { "my component" })
}

参数

参数声明为普通函数参数

use cercis::prelude::*;

fn main() {
  let text = "Lorem ipsum";

  let page = rsx!(div {
    MyComponent {
        text: text
    }
  });

  // output: <div><p>Lorem ipsum</p></div>
  println!("{}", page.render())
}

#[component]
fn MyComponent<'a>(text: &'a str) -> Element {
    rsx!(p { "{text}" })
}

可选参数

如果参数是可选的，那么在调用组件时可以省略它

use cercis::prelude::*;

fn main() {
  let text = "Lorem ipsum";

  let page = rsx!(div {
    MyComponent {}
    MyComponent {
        text: text
    }
  });

  // output: <div><p>empty</p><p>Lorem ipsum</p></div>
  println!("{}", page.render())
}

#[component]
fn MyComponent<'a>(text: Option<&'a str>) -> Element {
    let text = text.unwrap_or("empty");

    rsx!(p { "{text}" })
}

子组件

组件可以接受元素 example: Element<'a> 和子组件，如果您将变量命名为 children: Element<'a>

所有 Element 类型都是可选的

use cercis::prelude::*;

fn main() {
    let text = "Lorem ipsum";

    let page = rsx!(div {
      MyComponent { span { "children" } }
      MyComponent {
          text: rsx!(p { "{text}" }),

          span { "children" }
      }
      MyComponent { text: rsx!(p { "my text" }) }
    });

    /* output(formatted):
    <div>
        <div class='container'>
            <div></div>
            <span>children</span>
        </div>
        <div class='container'>
            <div><p>Lorem ipsum</p></div>
            <span>children</span>
        </div>
        <div class='container'>
            <div><p>my text</p></div>
        </div>
    </div>
    */
    println!("{}", page.render())
}

#[component]
fn MyComponent<'a>(text: Element<'a>, children: Element<'a>) -> Element {
    rsx!(div {
        class: "container",

        div { text }
        children
    })
}

如果您有任何问题 创建问题