显示类别中的所有帖子 - TypeScript

如果你正在为你的应用程序编写一个页面来显示特定类别的所有帖子，那么这篇文章就是为你准备的！

获取帖子列表

首先，我们需要获取该类别下的所有帖子。我们将使用 Node.js 和 TypeScript 来完成这个任务。我们先定义一个 Post 接口来描述这些帖子：

interface Post {
  id: string;
  title: string;
  content: string;
}

现在，我们需要从后端获取帖子列表。可以通过向以下 API 发出 GET 请求来获取帖子：

https://api.example.com/posts?category=your-category

接下来，我们可以使用 fetch 函数（在 window.fetch 中）来获取帖子：

async function getPosts(category: string): Promise<Post[]> {
  const response = await fetch(`https://api.example.com/posts?category=${category}`);
  if (!response.ok) {
    // 处理一个错误响应
  }
  const data = await response.json();
  return data.posts;
}

显示帖子列表

在获取完帖子列表后，我们需要展示这些帖子。在这里，我们使用 React 来进行展示。我们定义一个 PostList 组件来渲染帖子列表：

import * as React from 'react';

interface PostListProps {
  category: string;
}

interface PostListState {
  posts: Post[];
}

export class PostList extends React.Component<PostListProps, PostListState> {
  constructor(props: PostListProps) {
    super(props);
    this.state = { posts: [] };
  }

  async componentDidMount() {
    const posts = await getPosts(this.props.category);
    this.setState({ posts });
  }

  render() {
    return (
      <div>
        {this.state.posts.map(post => (
          <div key={post.id}>
            <h2>{post.title}</h2>
            <div>{post.content}</div>
          </div>
        ))}
      </div>
    );
  }
}

这个组件将渲染每个帖子的标题和内容。它使用 componentDidMount 生命周期钩子来在加载组件时获取帖子列表。稍后将展示在 DOM 中的位置。

使用组件

现在我们已经准备好了一个帖子列表组件，需要在我们的应用程序中使用它。在这里，我们假设您已经使用 TypeScript 创建了应用程序，并且已经正确安装了 React 库和类似的依赖项。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { PostList } from './PostList';

function App() {
  return (
    <div>
      <h1>My Blog</h1>
      <PostList category="tech" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

在这个例子中，我们将 PostList 组件包装在一个应用程序组件中，并将 category prop 设置为我们感兴趣的类别。组件将自动加载并呈现当前类别下的所有帖子。

结论

现在你已经了解了如何用 TypeScript，React 和 Node.js 编写代码来显示特定类别下的所有帖子。我们从获取帖子列表开始，然后渲染到屏幕上。我们希望这些信息对你有所帮助！