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

【问题标题】：React.Children.only expected to receive a single React element child.?React.Children.only 期望接收单个 React 元素子元素。？
【发布时间】：2019-07-12 23:55:25
【问题描述】：

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

【问题讨论】：

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

标签： reactjs

【解决方案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>

【讨论】：