错误：错误：预期'，'，在nextjs中得到'className'答案

【问题标题】：Error: error: Expected ',', got 'className' in nextjs错误：错误：预期'，'，在nextjs中得到'className'
【发布时间】：2022-01-05 16:48:55
【问题描述】：

错误：错误：预期为 ','，在 nextjs 中得到了 'className'

我正在尝试使用引导程序 4 制作登录页面，但编译后显示上述错误。

在 div 标签的第 15 行显示错误

    return (

        <Head>
            <title>Sign in</title>
        </Head>
        <form>
            <div className="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div className="form-group">

                <label for="exampleInputPassword1">Password</label>

                <input type="password" className="form-control" id="exampleInputPassword1" placeholder="Password" />
            </div>
            <div className="form-check">
                <input type="checkbox" className="form-check-input" id="exampleCheck1" />
                <label className="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            
            <button type="submit" className="btn btn-primary">Submit</button>
        </form> 
    )
}

export default signin

【问题讨论】：

提供的代码似乎与错误无关。
这能回答你的问题吗？ React - expressions must have one parent element?

标签： javascript reactjs next.js

【解决方案1】：

ReactJS 不允许有 2 个父元素，请确保使用 div 作为父元素

return (
    <div>
        <Head>
            ...
        </Head> 
        <form> 
            ...
        </form> 
    </div>
 )

【讨论】：

div 或只是 React 片段：reactjs.org/docs/fragments.html
是的，片段也可以，您也可以使用空括号return <> ... </> 为它们使用快捷方式