Реагировать на панировочные сухари

Я пытаюсь реализовать макет хлебных крошек в своем проекте реакции. Я не использую router4 для отображения URL. На данный момент панировочные сухари выглядят так.

Home
|Test Update
|Testssss
|Test11111

И я бы хотел, чтобы все они были в одной строке.

home|Test Update|Testssss|Test11111

Это мой код.

renderBreadCrumbs=(classes)=>{
    const {folderPathNames } = this.state;
    
    let items =[]
    if(!!folderPathNames){
      items = folderPathNames.map((folder,index)=>{
        return <div  key={index}>
        <a className={classes.rowalign} 
          onClick={this.handleFolderDestination}
          data-folder={folder.id}>|{folder.name}
        </a>
        </div>
      })
      return items
    }
  }

Я попытался заставить все компоненты перейти в одну строку с помощью display-inline, но это не сработало.

  styles:
    rowalign:{
      display: 'inline-block'
    }

Я также пробовал делать встроенные стили:

const divStyle = {
  display: 'inline-block'
};

и поместите это в свой код в этой строке

<a style={divStyle} 
   onClick={this.handleFolderDestination}
   data-folder={folder.id}>
   {folder.name}
</a>

когда я проверяю элемент в хроме, я получаю

<a data-folder="206" style="display: inline-block;">|Testssss</a>

Может ли кто-нибудь сказать мне, как сделать так, чтобы имена папок отображались в одной строке?

1
0
299
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для применения встроенных стилей следует использовать реквизиты style, а не className в соответствии с вашим кодом. Обратите внимание, что div должен быть вне всех a как их контейнер.

Напишите свой код как:

renderBreadCrumbs=(classes)=>{
    const {folderPathNames } = this.state;

    let items =[]
    if(!!folderPathNames){
      items = folderPathNames.map((folder,index)=>{
        return ( 
        <a style={divStyle} 
           key={index}
           onClick={this.handleFolderDestination}
           data-folder={folder.id}>|{folder.name}
        </a>
        )
      })
      return <div>{items}</div>
    }
  }

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

Great Khan 2016 13.09.2018 19:32

@ GreatKhan2016 Откройте chrome devtool, а затем проверьте html этих a, что вы там видите? Атрибут style присутствует или нет? Что такое лист для укладки, кстати?

Arup Rakshit 13.09.2018 19:33

<a data-folder="194">. Мои навыки отладки Chrome очень ограничены. У меня есть отдельный лист по импорту в компонент. Наверное, неправильное слово, чтобы называть это листом для укладки.

Great Khan 2016 13.09.2018 19:53

Ok. теперь вы понимаете, почему это не работает .. стиль там не применяется ... вероятно, classes.rowalign - это пустой объект {} .. добавить console.log(classes) .. Что он там печатает?

Arup Rakshit 13.09.2018 19:57

когда я делаю console.log, у него есть rowalign: «Index-rowalign-500». может мне стоит попробовать сделать встроенный стиль?

Great Khan 2016 13.09.2018 20:06

Да, ты можешь. Но я не понимаю, откуда взялось слово Index-rowalign-500 ... неважно ... Я пытался показать вам, как отлаживать.

Arup Rakshit 13.09.2018 20:09

Позвольте нам продолжить обсуждение в чате.

Great Khan 2016 13.09.2018 20:17

Другие вопросы по теме