无法在地图函数中返回 jsx答案

【问题标题】：Cannot return a jsx inside a map function无法在地图函数中返回 jsx
【发布时间】：2022-01-07 19:32:43
【问题描述】：

我无法显示我的消息，我认为这是因为我的 ChatRoom 组件代码在 map 和 return 语句中有问题，谁能帮我解决这个错误？非常感谢！

这里的错误： ./src/App.js SyntaxError: C:\Users\Admin\superchat\src\App.js: Unexpected token (90:16)

88 |     return ( < div > {
  89 |             messages && messages.map(msg =>
> 90 |                 return <
     |                 ^
  91 |                     ChatMessage key = {
  92 |                         msg.id
  93 |                     }

我的js：

function ChatRoom() {
    const messagesRef = firestore.collection('messages');
    const query = messagesRef.orderBy('createdAt').limit(25);

    const [messages] = useCollectionData(query, {
        idField: 'id'
    });

    return ( <div> 
      { messages && messages.map(msg =>
                return <
                    ChatMessage key = {
                        msg.id
                    }
                message = {
                    msg
                }
                />
               )} 
        < /div>
        )
    }

    function ChatMessage() {
        const {
            uid,
            text
        } = props.message

        return 
        <p> {text} </p>
    }

【问题讨论】：

标签： reactjs return

【解决方案1】：

将return 部分更改为：

return ( <div> 
  {messages && messages.map(msg => return <ChatMessage key = {msg.id} message = {msg}/>)} 
    </div>)

【讨论】：

【解决方案2】：

这应该可以，我相信你缺少括号。

return ( <div> 
      { messages && messages.map(msg =>
                return (<
                    ChatMessage key = {
                        msg.id
                    }
                message = {
                    msg
                }
                />)
               )} 
        < /div>
        )
    }

由于你将所有内容都包装在一个 div 中，你最好使用 span 元素或 React.Fragment。

【讨论】：