javascript - 获取此 React.Children.only 预计会收到单个 React 元素子错误，以便在 Next.js中使用

Question

我有以下代码。它给了我错误

错误：React.Children.only 期望接收单个 React 元素子级。

当我尝试解决它时，它只允许我在链接下使用一个标题。

<div className="container">
    {cards.map(card => (
        <div className="grid-item">
        <Link href={'/ninjas/' + card.id} key={card.id}>
        <h1>{ card.reporter }</h1>
        <h3>{ card.title }</h3>
        </Link>
        </div>
    ))}
</div>

标签： javascriptreactjsnext.js

Answer 1

请首先阅读以下内容：为什么使用 React.Children.only？ 这个问题可以通过这样做来解决：

  <div className="container">
                        {cards.map(card => (
                            <div className="grid-item">
                            <Link href={'/ninjas/' + card.id} key={card.id}>
                              <div>
                                <h1>{ card.reporter }</h1>
                                <h3>{ card.title }</h3>
                              </div>
                            </Link>
                            </div>
                        ))}
                    </div>

一般来说，Link 是一个组件，正如您可以在 react docs的文档或我提供的链接中阅读的那样，子级应始终嵌套在一个元素中。每个 React 组件应该返回的内容也是如此。