那是什么类型的组件初始化？

Question

我是初学者。我想知道下面的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

Answer 1

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

[除其他事项外，有几点要注意，没有“ this”的绑定，并且函数表达式没有像函数声明那样悬挂。

Answer 2

这是正常的功能组件。如果您只返回没有任何语句的内容，则箭头功能不需要大括号。

const sum = (a, b) => a + b;

上面的箭头函数返回a和b的总和。功能组件也是如此。

Answer 3

这是反应成分概念，请检查Here。

Answer 4

这是一个粗箭头功能，可轻松返回组件：

任一

const Posts = () => (
  <Async promiseFn={loadPosts}>
  </Async>
)  

将返回异步组件，

或

const Posts = () => {
return (
  <Async promiseFn={loadPosts}>
  </Async>
)  
};

因此第一种语法更短，更简单，但是两者都做同样的事情，返回异步组件：

希望有帮助。如有疑问，请随时