Рендеринг родителей / детей в React - PullRequest
Новая
       0

Рендеринг родителей / детей в React

0 голосов
/ 17 января 2020

мое приложение имеет сетку css на всем теле. Скажем, сетка выглядит так:

[1,2,2

1,3,4

1,5,6]

I иметь рендеринг вложенных компонентов в приложении. js. Родительский компонент - это боковая панель навигации, которая имеет собственный стиль и отображает ее на сетке № 1. У меня есть несколько раскрывающихся списков на компонентах боковой панели (каждый из них является дочерним элементом компонента sidebarnav), и я хочу, чтобы каждый ссылки для отображения ее содержимого в сетке 3, 4, 5 и 6. Но поскольку раскрывающиеся списки являются дочерними элементами боковой панели навигации, это заставляет их отображать в той же сетке родительский элемент (сетка 1, поскольку она наследует стиль родителя).

Я попытался упростить код, у каждой ссылки есть своя собственная страница (компоненты, допустим, она отображает элемент h1). Класс SideBar импортируется в приложение. js (который импортируется в индекс js) и имеет свой собственный стиль (сетка № 1). Как я могу сделать так, чтобы класс SideBar переходил в сетку № 1, а содержимое его дочерних элементов - в сетку № 3,4,5,6? Даже если я установлю className для Home. js и стилизую его, он перезаписывается родительским стилем. 

class SidebarNav extends React.Component{

render(){

 return(

 <div className='sidebar'>
  <button className="dropdown-btn" onClick={MyFunction}>My Portfolio
  </button>

  <div className="dropdown-container">
   <NavLink to='/Home'>Home</NavLink>
   <NavLink to='/Contact'>Content</NavLink>
   <NavLink to='/About us'>About us</NavLink>
  </div>

  <div>
   <Route exact path='/Home' component={Home}/>
  </div>

 </div>
)}}
...