SolidJS Typescript 开发指南(4) 组件应用

事件绑定

事件绑定在SolidJS里分为两种，一种是在原生dom上绑定的事件，另一种是自定义事件，原生dom的事件绑定很简单

const handleClick = (e: MouseEvent) => { console.log(e.target) }<div onClick={handleClick}>click here</div>

而SolidJS还支持以下语法，避免产生额外的闭包

const handleClick = (data: any, e: MouseEvent) => { console.log(e.target) }<div onClick={[handleClick, someData]}>click here</div>

自定义事件主要用于组件之间数据的传递
可以使用正常的props传递，这里就顺便把组件之间父传子的方式示范一下

// 父组件
const handleEvent = () => { /* do something */ }<CustomComponent onEvent={handleEvent}>click here</CustomComponent>// 子组件
import type { Component } from "solid-js";
interface CustomComponentProps {loading?: boolean;onEvent?: () => void;
}
// props的传递需要提前给出参数定义，也就是上面的interface
// 当然children也是可以传递的，下面会给出传递Children的范例
const CustomComponent: Component<CustomComponentProps> = function (props) {const loading = props.loading || false;onMount(() => {props.onEvent && props.onEvent();});return (<button>{loading ? "loading" : props.children}</button>);
};export default CustomComponent;

除此之外还提供了on的namespace的访问方法，这种事件不会被委托，在typeScript中需要事先声明

// 父组件
const handleEvent = () => { /* do something */ }
declare module "solid-js" {namespace JSX {interface CustomEvents {DbClick?: () => void;}}
}
<CustomComponent on:DbClick={handleEvent}>click here</CustomComponent>
// 子组件
import type { Component } from "solid-js";
import { createSignal } from "solid-js";
interface CustomComponentProps {loading?: boolean;"on:DbClick"?: () => void;
}
const CustomComponent: Component<CustomComponentProps> = function (props) {const [flag, setFlag] = createSignal<boolean>(false);const loading = props.loading || false;const handleClick = (e: MouseEvent) => {if (flag()) {props["on:DbClick"]   && props["on:DbClick"]();}setFlag(true);setTimeout(() => {setFlag(false);}, 400)}return (<button onclick={handleClick}>{loading ? "loading" : "click Me"}</button>);
};

这里是父传子children的范例

// 父组件
import type { Component } from "solid-js";
import Button from "../components/Button";const Index: Component = () => {return (<div><Button>Change</Button></div>);
};export default Index;
// 子组件
import type { JSX, Component } from "solid-js";
interface ButttonProps {children?: JSX.Element;
}
const Button: Component<ButttonProps> = function (props) {return (<button classList={currentClassList} aria-disabled="false">{props.children}</button>);
};
export default Button;

样式绑定

SolidJS给dom绑定style的时候直接传入css本身的字段，这也就意味着可以利用css变量

const [themeColor, setThemeColor] = createSignal<string>("#888afc");
<div style={{ "--my-custom-color": themeColor() }}><span style={{"background-color": "var(--my-custom-color)"}}/>
</div>

classList

dom绑定某个样式类名，可以按照普通惯例直接传入字符串

<buttonclass={current() === 'foo' ? 'selected' : ''}onClick={() => setCurrent('foo')}
>foo</button>

或者传入classList

<buttonclassList={{selected: current() === 'foo'}}onClick={() => setCurrent('foo')}
>foo</button>

如果按照模块化传入

import { active } from "./style.module.css"
// 此时div上的active为模块化类名，实际会加上一串hash值以区分模块
<div classList={{ [active]: isActive() }} />

Ref绑定

ref绑定非常简单，但要记住绑定是一个异步过程，如果要在渲染之后对ref做任何操作也需要在异步函数中获取

import type { Component } from "solid-js";
const Index: Component = () => {let buttons: any;console.log(buttons); // undefinedqueueMicrotask(() => {console.log(buttons);// <button>Click Me</button>});return (<div><button ref={buttons}>Click Me</button></div>);
};export default Index;

在某些情况下需要将子级的ref暴露给父级，则按props传递即可

const Button: Component<ButttonProps> = function (props) {return (<button ref={props.ref}>{props.children}</button>);
};

本文链接：https://blog.csdn.net/weixin_41907106/article/details/126345942

SolidJS Typescript 开发指南(4) 组件应用相关推荐

Blazor 组件库开发指南
翻译自 Waqas Anwar 2021年5月21日的文章 <A Developer's Guide To Blazor Component Libraries> [1] Blazor 的 ...
Blazor 模板化组件开发指南
翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...
一分钟带你了解Huawei LiteOS组件开发指南
摘要:本文将基于Huawei LiteOS系统,从组件定义开始带你走进组件开发指南. 本文分享自华为云社区<一分钟带你了解Huawei LiteOS之组件开发指南>,作者: Lionlac ...
Blazor 路由及导航开发指南
翻译自 Waqas Anwar 2021年4月2日的文章 <A Developer's Guide To Blazor Routing and Navigation> [1] 检查传入的请 ...
【总结】1591- 从入门到精通：使用 TypeScript 开发超强的 CLI 工具
作为一名开发者,掌握 CLI 工具的开发能力是非常重要的.本文将指导你如何使用 TypeScript 和 CAC 库开发出功能强大的 CLI 工具. 快速入门首先,需要先安装 Node.js 和 n ...
开发指南专题十：JEECG微云快速开发平台--表单校验组件ValidForm
开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm 10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub" ...
开发指南专题九：JEECG微云快速开发平台-表单校验组件ValidForm
开发指南专题九:JEECG微云快速开发平台表单校验组件ValidForm 10.表单校验组件ValidForm 10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Valid ...
『TopCoder 组件开发指南』
导读: 『TopCoder 组件开发指南』 Ⅰ. 简介 TopCoder 组件开发 TopCoder 组件开发使用的语言包括Java 和C#,尽管这两种语言有较大差别,但开发过程却非常相似.本指南将 ...
2019 Vue开发指南：你都需要学点啥？
出处:葡萄城官网链接:https://www.cnblogs.com/powertoolsteam/p/11056531.html 原文:https://dzone.com/articles/vue ...