使用Cycle.JS与Snabbdom和Typescript(包裹捆绑器)时,复选框类型标记消失

xzv2uavs  于 2022-11-18  发布在  TypeScript
关注(0)|答案(1)|浏览(122)

我刚刚尝试在Cycle.JS中使用一个简单的切换示例来实现Typescript。
设置如下:

包.json

{
  "name": "parcel-cycle-playground",
  "version": "0.1.0",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html"
  },
  "dependencies": {
    "@cycle/dom": "^23.1.0",
    "@cycle/http": "^15.4.0",
    "@cycle/run": "^5.7.0",
    "xstream": "^11.14.0"
  },
  "devDependencies": {
    "parcel": "^2.8.0",
    "process": "^0.11.10"
  }
}

tsconfig.json(复制自Snabbdom主页)

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "jsx",
    "jsxFragmentFactory": "Fragment"
  }
}

应用程序.jsx

import { jsx, VNode } from "snabbdom";
// import xs from "xstream";
import run from "@cycle/run";
import { makeDOMDriver } from "@cycle/dom";

const intent = sources => {
    const domSource = sources.DOM;

    return {
        toggleClicked$: domSource.select('.input').events('click')
    }
}

const model = actions => {
    const toggleState$ =  actions.toggleClicked$
        .map(ev => ev.target.checked)
        .startWith(false)

    return toggleState$
}

const view = (state$): VNode => {
    return state$.map(toggled =>
        <div>
            <input type="checkbox" className="input" /> Toggle me
            <p>{ toggled ? 'ON' : 'off'}</p>
        </div>
    )
}

const main = sources => {
    const actions = intent(sources);

    return {
        DOM: view(model(actions))
    }
}

run(main, {
    DOM: makeDOMDriver('#app')
});

复选框呈现为文本输入,类型标记消失:

我刚开始使用Typescript,不知道问题出在哪里。
这个简单示例的普通版本运行得非常好。在切换到typescript之后,输入字段立即呈现为文本输入。

vybvopom

vybvopom1#

在Snabbdom文档中,还有另一种语法:

<input attrs={{ type: "checkbox" }} />

不知道为什么没有 typescript 它也能工作。也许是在包裹的引擎盖下有巴别塔。

相关问题