Question

有人可以解释为什么我必须拥有＆＃34; props.children＆＃34;包裹在＆＃34; div＆＃34;反应路由器工作。

这有效：

export default (props) => {
        return (
            <div id="main-template">
                {props.children}
            </div>
        );
}

然而，这并不是：

export default (props) => {
        return (
                {props.children}
        );
}

非常感谢任何解释。

Answer 1

如果您有一个子节点，则不需要将props.children包裹到{}，您只需返回props.children

const Component = (props) => {
    return props.children;
};

如果您有多个节点，例如

<p>1</p>
<p>2</p>
<p>3</p>

你必须将children包装到一个根元素，因为组件必须只返回一个根元素，你不能返回几个，如下所示

return (
  <p>1</p>
  <p>2</p>
  <p>3</p>
)

Answer 2

JSX将看似HTML的代码转换为javascript函数调用。返回多个顶级组件

return (
    React.createElement('p', null, 'text'),
    React.createElement('p', null, 'text'),
    React.createElement('p', null, 'text')
);

转变为

{{1}}

无效。由于您需要返回单个值，因此不能渲染多个顶级元素。 React团队一直试图弄清楚如何妥善处理这个问题，但目前还没有解决方案。

Answer 3

您不需要将props.children包裹在div中。这里的问题是您错误地利用了return语句上的括号。每当我们有多行jsx块时，都会在左括号和右括号之间插入

。

在您的情况下，您没有多行jsx，实际上您是一个单行javascript表达式，因此您可以执行以下操作：

export default (props) => {
        return props.children;
}

为什么没有大括号？因为您那里没有任何jsx。花括号仅适用于要将JavaScript变量注入jsx的情况。

Answer 4

有人可以解释为什么我必须将“ props.children”包裹在“ div”中才能使React-router正常工作。

这不是React Router或props.children问题。 React需要一组由父元素包装的元素（“子代”）。

有几种解决方案：

https://reactjs.org/docs/fragments.html

<Fragment>{props.children}</Fragment>

<>{props.children}</>

<div>{props.children}</div>