将 React 组件嵌套在变量中

Question

>我在底部附加了相关代码

嘿伙计们，我创建了一个包含多个按钮组件的文件，以及一个函数组件，该组件应该根据它收到的道具呈现 2 个按钮(例如，渲染 & 何时在主页中，渲染和何时在不同的页面中(。

概念是创建一个组件，该组件将始终呈现在我的布局 HOC 中，并根据页面 URL 知道要显示哪些按钮。

我尝试实现按钮功能的方法是创建一个变量，该变量将根据当前 url 在开关情况下分配两个正确的按钮，并返回该变量。

我尝试分配一个由 React.Fragment 组成的 JSX 元素，该元素包含 2 个相关的按钮组件，但我收到一个错误，说我需要有一个相应的结束标记..？

我真的很感激解释为什么会发生这种情况，以及我的用例的正确方法是什么。

多谢。。。！！！

我的布局 HOC：

const Layout = props => (
<Grid fluid>
<div style={layoutStyles}>
{props.children}
<FloatingButtons page={props.page.pathname} />
</div>
<div style={layoutStyles}>
{ showFooter(props.page.pathname, pagesToShow) && <Footer /> }
</div>
</Grid>

这是我的浮动按钮组件：

const FloatingButtons = (props) => {
const { page } = props;
let buttons;
let simplifiedUrl = page.slice(page.lastIndexOf('/') + 1);
switch (simplifiedUrl) {
case 'home':
buttons =
<React.Fragment> ***// Here is where I get the error***
<MenuFloatingBtn {...props} />
<ShareFloatingBtn {...props} />
<React.Fragment/>
break;
case 'otherPage':
buttons = 'etc'
break;
default:
break;
}
return buttons;
};

Answer 1

而不是拒绝let buttons. 您可以直接返回答案。不需要break. 比switch将如下所示：

switch (simplifiedUrl) {
case 'home':
return (
<React.Fragment> ***// Here is where I get the error***
<MenuFloatingBtn {...props} />
<ShareFloatingBtn {...props} />
<React.Fragment/>);
case 'otherPage':
return 'etc';
default:
return null;
}

祝你好运！