面试题：React 中如何封装一个基础的列表组件并实现复用

1. React 函数式组件和 hooks 实现列表组件

import React, { useState } from'react';

interface ListItem {
  id: number;
  name: string;
}

const ListComponent: React.FC<ListItem[]> = (listData) => {
  const [selectedItem, setSelectedItem] = useState<ListItem | null>(null);

  const handleItemClick = (item: ListItem) => {
    setSelectedItem(item);
  };

  return (
    <ul>
      {listData.map(item => (
        <li
          key={item.id}
          onClick={() => handleItemClick(item)}
          style={{ backgroundColor: selectedItem === item? 'lightgray' : 'white' }}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
};

export default ListComponent;

2. 复用方式

不同页面引入使用：在需要展示列表的不同 React 页面组件中，通过 import 语句引入该 ListComponent 组件，并传入符合数据结构要求的列表数据。例如：

import React from'react';
import ListComponent from './ListComponent';

const SomePage: React.FC = () => {
  const listData: ListItem[] = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' }
  ];

  return (
    <div>
      <h1>Some Page</h1>
      <ListComponent listData={listData} />
    </div>
  );
};

export default SomePage;

作为独立模块复用：将 ListComponent 打包成独立的 npm 模块，发布到 npm 仓库。其他项目可以通过 npm install 安装该模块，并在项目中按照上述方式引入使用，实现跨项目复用。
结合 React 上下文（Context）复用：如果列表组件需要和其他组件共享某些状态（如选中状态等），可以使用 React Context。创建一个 Context，在 ListComponent 中使用 useContext 和 useReducer 等 hooks 来管理和共享状态，这样在不同地方使用 ListComponent 时，可以共享这些状态，同时也便于统一维护和修改。

星途面试题库

面试题：React 中如何封装一个基础的列表组件并实现复用

知识考点

面试题答案

1. React 函数式组件和 hooks 实现列表组件

2. 复用方式