在 React 项目中执行动态组件内容/结构的最佳实践

Question

我目前正在使用 React 创建一个定向网站（没什么大不了的，只是一个大学项目）。目前我正在实现一个待办事项列表，它是一个组件列表，可以下拉以提供有关待办事项的更详细信息。

我很快意识到，当涉及详细的下拉部分时，每个项目都需要具有独特的结构/内容，即有些项目将包含列表、视频、图像等，而不仅仅是文本简介。另请注意，我将使用 MongoDB 并将所有数据从那里获取到组件。

好奇执行此操作的最佳方法是什么（我应该在没有可重复反应组件的情况下实现这一切吗？）。这不是一个阻止我的问题，但我想知道在反应项目中此类事情的最佳实践。我到目前为止所附的示例当前待办事项列表示例

只是寻求最佳实践

Answer 1

您可以创建一个动态组件，根据从 MongoDB 获取的数据调整其结构，而不是为每种类型的待办事项详细信息视图创建单独的组件。

1. 模块化组件：保持组件模块化且可重用。在其中使用条件渲染（“switch”或“if”语句） 组件。
2. 组件可重用性：旨在创建能够适应不同数据结构的组件。这使您的代码更加灵活 更容易维护。
3. 状态管理：使用React hooks（'useState'，'useEffect'）来管理组件状态并异步获取数据。

示例：-

import React from 'react';

const TodoItem = ({ todo }) => {
  return (
    <div className="todo-item">
      <h3>{todo.title}</h3>
      <p>{todo.description}</p>
      <DetailsSection details={todo.details} />
    </div>
  );
};

const DetailsSection = ({ details }) => {
  switch (details.type) {
    case 'list':
      return <ul>{details.content.map((item, index) => <li key={index}>{item}</li>)}</ul>;
    case 'video':
      return <iframe title="video" width="560" height="315" src={details.url} frameBorder="0" allowFullScreen></iframe>;
    case 'image':
      return <img src={details.url} alt="image" />;
    default:
      return null;
  }
};

export default TodoItem;