面试题：Solid.js 中 JSX 语法的基本使用

Question

在 Solid.js 项目中，创建一个简单的组件，使用 JSX 语法展示一个包含用户名和用户年龄的卡片。要求用户名和年龄作为组件的属性传入，并且在卡片上正确显示。请写出完整的代码示例，包括组件的定义和调用。

Answer 1

import { createSignal } from "solid-js";

// 定义组件
const UserCard = (props) => {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', borderRadius: '5px' }}>
      <p>用户名: {props.username}</p>
      <p>年龄: {props.age}</p>
    </div>
  );
};

// 调用组件
const App = () => {
  const [username, setUsername] = createSignal('张三');
  const [age, setAge] = createSignal(25);

  return (
    <div>
      <UserCard username={username()} age={age()} />
    </div>
  );
};

export default App;