将 React 组件嵌套在变量中答案

【问题标题】：Nesting React components in a variable将 React 组件嵌套在变量中
【发布时间】：2019-11-25 10:07:15
【问题描述】：

我已在底部附上相关代码

大家好，我创建了一个包含多个按钮组件的文件，以及一个功能组件，该组件应该根据它接收到的道具呈现 2 个按钮（例如，在主页中呈现 & 时，以及在不同页面中时呈现 & )。

其概念是创建一个始终在我的 Layout HOC 中呈现的单个组件，并且会根据页面 url 知道要显示哪些按钮。

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

我尝试分配一个由 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;
};

【问题讨论】：

这只是一个错字。 <React.Fragment/> 应该是 </React.Fragment>。另请注意，在 React/JSX 的现代版本中，您可以改用 <>...</>。
????非常感谢

标签： javascript reactjs web jsx react-component

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

祝你好运！

【讨论】：