使用ArkTS实现手风琴效果

ArkTS是一个基于TypeScript的轻量级状态管理库，它提供了一种简洁的方式来管理React应用的状态。手风琴（Accordion）效果通常用于展示和隐藏内容块，用户可以点击标题展开或折叠内容。要在使用ArkTS创建手风琴效果时，你可以按照以下步骤操作：

1. 安装依赖：首先，确保已经安装了React、ReactDOM和其他必要的库，包括ArkTS。

npm install @react-state/core react-dom

2. 创建状态管理：使用`@react-state/store`创建一个状态管理器，例如`AccordionState`，存储每个面板是否展开的布尔值。

import { Store } from '@react-state/store';

const accordionState = Store.create({
  isOpen: false,
});

3. 创建组件：创建一个`Accordion`组件，接受`isOpen`作为props，并包含两个面板（contentA和contentB），根据状态控制显示隐藏。

function Accordion({ isOpen }) {
  return (
    <div>
      <button onClick={() => accordionState.set('isOpen', !isOpen)}>
        展开{" "}
        {isOpen ? '↓' : '↑'}
      </button>
      {isOpen && (
        <div>
          <h4>Panel A</h4>
          <p>Content for panel A...</p>
        </div>
      )}
      {/* 添加第二个面板 */}
    </div>
  );
}

4. 应用组件：将`Accordion`组件连接到状态管理器的state上。

ReactDOM.render(
  <Accordion isOpen={accordionState.get('isOpen')} />,
  document.getElementById('root')
);