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绑定某个样式类名，可以按照普通惯例直接传入字符串

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

或者传入classList

<button
  classList={{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); // undefined
    queueMicrotask(() => {
        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