Передать дочерний элемент как реквизит в React - PullRequest
Новая
       34

Передать дочерний элемент как реквизит в React

0 голосов
/ 30 ноября 2018

Я строю простой сайт, используя Gatsby и styled-компоненты.Вот мой навигационный компонент: 

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?

1 Ответ

0 голосов
/ 30 ноября 2018

Основываясь на моем понимании проблемы, которую вы пытаетесь решить, вы всегда можете использовать функцию фильтра для отображения маршрутов на основе того, по какому маршруту человек в данный момент идет: 

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>
)

В этом случае выпотребуется определить текущее местоположение пользователя на сайте и просто передать это свойство компоненту навигации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...