React新手求教：Posts组件初始化类型及参数添加方法

嘿，我来帮你拆解这段代码的细节，一步步解答你的问题：

1. 组件类型与初始化方式 #

这确实是一个函数组件，它用了箭头函数的隐式返回语法。你注意到没有写大括号{}，是因为当箭头函数的返回内容是单个表达式时，可以省略大括号和return关键字。这里组件直接返回了<Async>这个JSX元素，用括号()把多行JSX包起来是为了避免换行带来的语法错误，同时让代码结构更清晰。如果换成显式返回的写法，就是这样：

const Posts = () => {
  return (
    <Async promiseFn={loadPosts}>
      {/* 子内容 */}
    </Async>
  )
}

两种写法完全等价，只是隐式返回更简洁。

2. 为什么没有render函数？ #

render函数是类组件的专属特性——类组件需要通过render()方法返回要渲染的JSX。而函数组件本身就是一个渲染函数，它的返回值就是页面上要渲染的内容，所以不需要额外写render方法，这是React函数组件和类组件的核心区别之一。

3. 如何添加参数并根据特定id返回对应文章？ #

要实现这个需求，我们需要修改三个核心部分：

• 让loadPosts函数接收postId参数，动态请求指定id的文章
• 让Posts组件接收外部传入的id属性（props）
• 修改渲染逻辑，适配单篇/多篇文章的展示场景

修改后的完整代码如下：

import React from "react"
import Async from "react-async"

// 1. 改造loadPosts，支持接收postId参数
const loadPosts = (postId) => {
  // 根据是否传入id，拼接不同的请求地址
  const url = postId 
    ? `https://jsonplaceholder.typicode.com/posts/${postId}`
    : 'https://jsonplaceholder.typicode.com/posts'
  
  return fetch(url)
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())
}

// 2. 组件通过props接收外部传入的id参数
const Posts = ({ id }) => (
  <Async promiseFn={() => loadPosts(id)}> {/* 将id传入loadPosts */}
    {({ data, error, isLoading }) => {
      if (isLoading) return <div>Fetching data... Please Wait</div>
      if (error) return <div>Something went wrong: {error.message}</div>
      if (data){
        // 3. 区分单篇文章（对象）和多篇文章（数组）的渲染逻辑
        const postContent = Array.isArray(data) 
          ? data.map(post => (
              <div key={post.id}> {/* 补充key属性，避免React控制台警告 */}
                <p>{post.title}</p>
                <hr />
                <h1>{post.body}</h1>
              </div>
            ))
          : (
              <div key={data.id}>
                <p>{data.title}</p>
                <hr />
                <h1>{data.body}</h1>
              </div>
            )
        
        return <div>{postContent}</div>
      }
      return null
    }}
  </Async>
)

export default Posts

使用这个组件时，你就可以按需传入特定id了：

// 渲染id为1的单篇文章
<Posts id={1} />
// 渲染全部文章（不传id即可）
<Posts />

另外补充个小细节：原代码中map循环没有加key属性，这在React中是不规范的，我在修改后的代码里补上了，避免控制台出现警告~

内容的提问来源于stack exchange，提问作者Mahesh Verma