react JSX 何时使用 () 以及何时使用 {}答案

【问题标题】：react JSX when to use () and when to use {}react JSX 何时使用 () 以及何时使用 {}
【发布时间】：2021-02-09 21:36:57
【问题描述】：

我真的很难理解以下反应函数中的语法有什么问题

    const listItem = (parentId) => {
            var childCategories = categories.filter(category => category.ParentId === parentId)
            return (
                childCategories.map(category => (
                    <ListItem key={category.Id} button>
                        <ListItemText primary={category.Name} />
                    </ListItem>
                    listItem(category.Id) //// it doesn't like this line
                ))
            )
        }

如果我取出带有注释“//// 它不喜欢这一行”的行，则该函数可以正常工作，当然没有递归。我尝试了所有不同的 {} 和 () 组合，例如{listItem(category.Id)} 但它仍然不起作用。知道语法有什么问题。

【问题讨论】：

也试试这个stackoverflow.com/questions/22876978/loop-inside-react-jsx
您能否在问题中包含整个组件？
这能回答你的问题吗？ How to return multiple lines JSX in another return statement in React?

标签： reactjs

【解决方案1】：

这是一个语法错误，与 React 无关，在 return statement 中你只能返回一个表达式。

return [[expression]];

你写的类似于：

array.map(item => { 
 return (item item) // syntax error
})

所以在这种情况下，对于 React，要返回单个值，您可以使用 React.Fragment：

<>
  <ListItem key={category.Id} button>
    <ListItemText primary={category.Name} />
  </ListItem>
  {listItem(category.Id)}
</>

【讨论】：