Question

我正在使用Gatsby和样式组件构建简单的网站。到目前为止，这是我的导航组件：

const Navigation = () => (
  <NavigationContainer>
    <List>
      <NavItem><StyledLink to={'/converter/'}>Go to Converter</StyledLink></NavItem>
      <NavItem><StyledLink to={'/about/'}>Go to About</StyledLink></NavItem>
      <NavItem><StyledLink to={'/'}>Go to Main Page</StyledLink></NavItem>
    </List>
  </NavigationContainer>

)

我想在每个站点上使用此组件，但要使用不同的<NavItem>文本和链接。我不知道它如何与这个组件一起工作：

const About = () => (
  <>
    <Body>
      <Navigation />
    </Body>
  </>
)

因此，在不同的站点上，我希望Navigation组件具有指向不同页面和文本的链接。可以使用props来实现吗？

Answer 1

根据我对您要解决的问题的了解，您始终可以使用过滤器功能根据人员当前所处的路线来绘制路线：

const routes = [{
  to: '/converter/,
  message: 'Go to Converter',
},
{
  to: '/about/',
  message: 'Go to About',
},
{
  to: '/'
  message: 'Go to Main Page',
}];

const Navigation = (currentLocation) => (
  <NavigationContainer>
    <List>
      {routes.filter(route => {
           if (route.to !== currentLocation) {
              return <NavItem><StyledLink to={route.to}>{route.message}</StyledLink></NavItem>
           }
        })
      }
    </List>
  </NavigationContainer>
)

在这种情况下，您需要确定用户在网站上的当前位置，然后将该属性传递到导航组件中。

在React中将子元素作为道具传递

1 个答案: