在小括号()上使用或者在react组件中使用大括号{}

Question

我正在测试一个反应组件，但在使用数组映射时遇到问题，其中定义了一个匿名箭头函数，并且在箭头 (=>) 之后我使用了大括号。那么里面的代码就无法执行了。调用其他名为 Star 的组件的代码，该组件使用反应图标使用 FaStar 绘制星星。 无论如何，我不得不更改圆括号的大括号并解决问题。

基本上，我的问题是使用大括号或使用圆括号、映射和箭头匿名函数有什么区别？什么时候可以使用圆括号或大括号？

感谢您的帮助。最佳记录

这是代码不起作用（在地图的匿名函数后使用大括号）

import React from 'react'
import { useState } from 'react'
import Star from './Star'

const StarRating = ({totalStars}) => {

  const [selectedStars, setSelectedStars] = useState(0)
  const starArray = arrayLenght => [...Array(arrayLenght)]
  console.log("totalStarts", totalStars)

  return (
    <>
      {starArray(totalStars).map((n, i) => {
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
         />
      })}
    </>
  )
}

export default StarRating

此代码工作正常（在地图的匿名函数后使用括号）

import React from 'react'
import { useState } from 'react'
import Star from './Star'

const StarRating = ({totalStars}) => {

  const [selectedStars, setSelectedStars] = useState(0)
  const starArray = arrayLenght => [...Array(arrayLenght)]
  console.log("totalStarts", totalStars)

  return (
    <>
      {starArray(totalStars).map((n, i) => (
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
         />
      ))}
    </>
  )
}

export default StarRating

Answer 1

区别与牙套有关。 没有大括号，

return

是隐式的，而有大括号，你需要做一个明确的

return

.

下面这个

   <>
      {starArray(totalStars).map((n, i) => {
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
         />
      })}
    </>

会改成这样

   <>
      {starArray(totalStars).map((n, i) => {
        return <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => setSelectedStars(i + 1)}
         />
      })}
    </>