SolidJS Typescript 开发指南 Props和Store

import { createSignal } from 'solid-js';
import { createStore } from 'solid-js/store';
 
// 定义一个简单的组件
export default function MyComponent(props) {
  // 使用props
  const [name, setName] = createSignal(props.initialName);
  
  // 使用store
  const [counter, setCounter] = createStore(0);
  
  // 示例方法，用于增加计数器
  function incrementCounter() {
    setCounter(counter() + 1);
  }
  
  // 渲染组件
  return (
    <div>
      <h1>Hello, {name()!}!</h1>
      <p>Counter: {counter()}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
}
 
// 设置默认属性
MyComponent.defaultProps = {
  initialName: 'Guest'
};

这个简单的SolidJS组件示例展示了如何使用Props和Store。组件接收一个名为initialName的属性，并使用它来初始化一个信号。它还使用了一个简单的store来维护一个计数器，并提供了一个按钮来增加计数器的值。这个例子简单明了地展示了如何在SolidJS中处理属性和状态，对于初学者来说是一个很好的教学资源。