在Vue 3中，JSX语法可以与Composition API一起使用，以提供一种更接近JavaScript的方式来编写组件。以下是Vue 3中使用JSX的一些关键点：

1. 普通内容：在JSX中，你可以直接写入HTML标签，并且可以像在JavaScript中那样使用表达式。

   setup() {
     return () => <p>Hello World</p>;
   }
   

2. 事件处理：事件监听可以通过在JSX中直接使用on前缀来绑定，例如onClick。

   setup() {
     const handleClick = () => {
       console.log('Clicked');
     };
     return () => <button onClick={handleClick}>Click me</button>;
   }
   

3. 响应式状态：可以使用ref或reactive来创建响应式状态，并在JSX中直接使用。

   import { ref } from 'vue';
   
   setup() {
     const count = ref(0);
     const increment = () => {
       count.value++;
     };
     return () => <button onClick={increment}>{count.value}</button>;
   }
   

4. 插槽：在JSX中，插槽可以通过v-slots属性传递给组件。

   const App = {
     setup() {
       const slots = {
         default: () => <div>Default slot content</div>,
         namedSlot: () => <span>Named slot content</span>,
       };
       return () => <SomeComponent v-slots={slots} />;
     },
   };
   

5. v-if：在JSX中，可以使用JavaScript的条件表达式来实现v-if逻辑。

   setup() {
     const show = ref(false);
     return () => (
       <>
         {show.value && <span>Displayed if show is true</span>}
         {!show.value && <span>Displayed if show is false</span>}
       </>
     );
   }
   

6. v-for：在JSX中，可以使用JavaScript的map函数来实现v-for逻辑。

   setup() {
     const items = ref(['Item 1', 'Item 2', 'Item 3']);
     return () => (
       <>
         {items.value.map((item, index) => (
           <div key={index}>{item}</div>
         ))}
       </>
     );
   }
   

7. v-model：在JSX中，v-model可以通过直接绑定value和更新事件来实现。

   setup() {
     const inputValue = ref('');
     return () => <input value={inputValue.value} onInput={e => inputValue.value = e.target.value} />;
   }
   

8. 指令和修饰符：在JSX中，Vue的指令和修饰符可以通过特定的方式来使用，例如v-show可以直接作为属性传递。

   setup() {
     const isVisible = ref(false);
     return () => <div style={{ display: isVisible.value ? 'block' : 'none' }}>Visible content</div>;
   }
   

使用JSX编写Vue 3组件可以让你更灵活地使用JavaScript的特性，同时也能够享受Vue提供的响应式和组件化的优势。