时间戳

首页 > 解决方案 > 那是什么样的组件初始化？

reactjs - 那是什么样的组件初始化？

问题描述

我是反应的初学者。我想知道下面的Post组件中的初始化是什么？那是一个功能吗？为什么没有声明函数或渲染函数的花括号 {}？

我想更详细地了解代码，以便我可以根据自己的要求对其进行更改。如何为其添加参数并根据特定 ID 返回帖子。

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

const loadPosts = () =>
 fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())

const Posts = () => (
  <Async promiseFn={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){
          const responseData = data.map((post)=>{
            return(
              <div>
               <p> {post.title} </p>
               <hr />
               <h1> {post.body} </h1>
              </div>
            )
          })
        return(
          <div>
           {responseData}
          </div>
        )
       }
      return null
    }}
  </Async>

)

export default Posts

标签： reactjsreact-component

解决方案

那是一个“胖”箭头函数表达式。这是一个 ES6 功能：https ://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc

需要注意的几件事（除其他外）是，没有“this”的绑定，并且函数表达式不像函数声明那样被提升。

推荐阅读