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>

这是我的FloatingButtons组件：

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;
  }

祝你好运！

将React组件嵌套在变量中

1 个答案: