Lib.rs

reacty_yew - 通过TypeScript类型定义从React组件生成Yew组件

这是从具有TypeScript类型定义的React组件自动生成Yew组件的实验性方案。许多部分尚未完善，此代码可能不适合在生产环境中使用！

带有更多信息的公告博客文章

展示

完整示例请见 ./examples/bad_button。

给定一个React组件

import * as React from "react";

interface BadButtonProps {
  color?: string,
  text: string,
}

const BadButton = (props: BadButtonProps): JSX.Element => {
  return (
    <button
      style={{ backgroundColor: props.color }}
      onClick={() => window.alert("Click!")}
    >
      {props.text}
    </button>
  );

};

export { BadButton };

通过调用 react_component_mod! 宏（输入需要生成的模块名称、类型声明路径以及包含React组件的JS全局（UMD）路径）生成一个模块

react_component_mod!(
    bad_button;
    types = "../js_package/dist/index.d.ts",
    global = "BadButtonLib"
);

您可以直接在Yew组件中使用生成的组件 BadButton

use yew::prelude::*;
use crate::bad_button::BadButton;

// ...
fn view(&self) -> Html {
    html! {
        <div>
            <BadButton text="Actual props" />
        </div>
    }
}
// ...