tsdx react 内嵌组件模版 / Bruce He

// demo 渲染代码，如果容器加载的是 main 变量，则不会加载此变量

demo = {

const dom =

this || html`<div style="display: inline-block; width: ${width}px" />`;

const r = ReactDOM.createRoot(dom);

r.render(main);

// 注意释放资源

invalidation.then(() => r.unmount());

return dom;

}

// 容器实际会加载的函数组件

main = {

let content = (config && config.content) || "（未设置内容）";

let type = (config && config.type) || "default";

// 通过 config.value 读取值，通过 onEvents.onConfigChange 回调变更

return jsx`

<${MyComp}

compKey=${compKey}

type=${type}

onClick=${

onEvents.onClick || (() => console.log("此按钮没有绑定点击事件"))

}

chartFields=${fields}

chartData=${data}

}

compKey = "" // 待注入

// 此组件需要传入的字段信息

fields = []

// 此组件需要传入的数据信息

data = []

// 此控件的属性配置

config = ({ content: "查询", type: "primary" })

// 此控件的事件响应配置

onEvents = ({

onClick: _.noop

})

// 用于监听实际容器高度，此变量将会被覆盖

height = 300

MyComp = () => "TODO: replace this"

// 加到这里表示允许变量被 redefine

React = import(`https://cdn.jsdelivr.net/npm/react@18.2.0/+esm`)

// 加到这里表示允许变量被 redefine

ReactDOM = import(`https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm`)

// 加到这里表示允许变量被 redefine

htm = require("https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.umd.js")