面试题：Solid.js 组件复用中如何通过props实现动态数据传递

Question

在Solid.js中，假设你有一个可复用的按钮组件，如何通过props传递不同的文本和点击事件处理函数，使得这个按钮在不同的场景下有不同的显示文本和点击行为？请给出代码示例。

Answer 1

在Solid.js中，我们可以通过以下方式实现通过props传递不同的文本和点击事件处理函数给按钮组件：

1. 创建按钮组件：

import { createSignal } from 'solid-js';
import { Button } from './Button'; // 假设Button组件单独在Button.js文件

const App = () => {
  const [count, setCount] = createSignal(0);
  const handleClick = () => setCount(count() + 1);

  return (
    <div>
      <Button text="点击我增加计数" onClick={handleClick} />
      <p>计数: {count()}</p>
    </div>
  );
};

export default App;

2. Button组件代码：

import { JSX } from'solid-js';

interface ButtonProps {
  text: string;
  onClick: () => void;
}

const Button: (props: ButtonProps) => JSX.Element = ({ text, onClick }) => {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

在上述代码中：

• 在App组件中，我们创建了一个count信号量和handleClick函数来更新count。然后通过props传递text和onClick给Button组件。
• Button组件接收text和onClick属性，并将它们应用到<button>元素上，这样就实现了按钮在不同场景下有不同的显示文本和点击行为。