Question

我有一个DupRoute组件，它创建一个路由数组，当我向交换机添加DupRoute组件时，出现错误， React.Children.only只希望接收一个React元素的子元素。这是我的猫。 https://codesandbox.io/s/74548ypmk6

Answer 1

问题表明，在代码中的某个位置，当它仅接受1时，您将多个子组件作为子组件。

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

尝试更改

{" "}
{text}
{" "}

到

<Fragment>
     {" "}
     {text}
     {" "}
</Fragment>

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

路线组件的职责是在位置与路线的路径匹配时呈现UI（我们作为道具的一部分提供）。

Answer 2

您可以看到route是关于要有多个子项来渲染的投诉，因此您需要使用<Route key={id} component={component} render={render} children={children} path={path} exact={exact} strict={strict} location={location} sensitive={sensitive} > <> {" "} {text}{" "} </> </Route>来组合多个子项，例如

recipBits :: Integer -> [Bool]
recipBits n = dblAndMod2 2
    where dblAndMod2 :: Integer -> [Bool]
          dblAndMod2 !r = let bit = r >= n
                              r'  = 2 * (if bit then r - n else r)
                          in  bit : dblAndMod2 r'

React.Children.only只希望接收一个React元素的孩子。

2 个答案: