React.Children.only 期望接收单个 React 元素子元素。？

Posted 2023-02-22

【中文标题】React.Children.only 期望接收单个 React 元素子元素。？

【英文标题】：React.Children.only expected to receive a single React element child.?

【发布时间】：2019-07-12 23:55:25

【问题描述】：

我有一个创建路由数组的 DupRoute 组件，当我将 DupRoute 组件添加到 Switch 时，我得到一个错误， React.Children.only 期望接收单个 React 元素子元素。 这是我的猫。 https://codesandbox.io/s/74548ypmk6

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码 。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建minimal reproducible example。

【参考方案1】：

问题是，在您的代码中的某处，当它只接受 1 时，您将多个组件作为子组件。

如果我没记错的话，duproute.js 中的 Route 组件不接受多个组件。 您在 Route 内部有 " " text" " 我认为这是无效的。

尝试改变

" "
text
" "

到

<Fragment>
     " "
     text
     " "
</Fragment>

片段可以安全地使用，因为它不会在我们的 DOM 中添加任何额外的 html 元素。

Route 组件的职责是在位置与路由的路径匹配时呈现 UI（我们将其作为 props 的一部分提供给它）。

【讨论】：

我怎么会没注意到这里和复制粘贴的结果，谢谢

很高兴它有帮助。

【参考方案2】：

正如你所看到的，路由是一个关于有多个子渲染它的抱怨，所以你需要使用React Fragment来组合这些多个子像

 <Route
          key=id
          component=component
          render=render
          children=children
          path=path
          exact=exact
          strict=strict
          location=location
          sensitive=sensitive
        >
         <>
          " "
          text" "
          </>
        </Route>