реагировать-материализовать SideNav и размещать триггеры

Я работаю над веб-сайтом и пытаюсь использовать SidNav из react-materialize. . У меня есть маршрутизатор с двумя визуализируемыми компонентами:

<Router>
    <div>
      <Route path="/" component={NavBar} />
      <Route path="/" component={Home} />
    </div>
  </Router>

Я хочу поместить кнопку триггера из NavBar в компонент Home.

<SideNav
    trigger={<Button>SIDE NAV DEMO</Button>}
    options={{ closeOnClick: true }}
  >

  </SideNav>

Я хочу повторно использовать боковую панель в нескольких компонентах. Как я могу это сделать?


reactjs javascript materialize
person Benjamin Sanvoisin    schedule 21.09.2018    source источник
comment
перейти на главную и просто вставить туда код (‹sideNav›‹/sideNav)? .. это не решит вашу проблему   -  person Shiva Sai    schedule 21.09.2018
comment
Да, но я хочу повторно использовать боковую панель в других местах   -  person Benjamin Sanvoisin    schedule 21.09.2018
comment
Вы имеете в виду, что тот же код, который вы пишете в компоненте sideNav для Home, также должен использоваться другим компонентом?   -  person Shiva Sai    schedule 21.09.2018
comment
Да, sidenav должен быть доступен на всех остальных страницах.   -  person Benjamin Sanvoisin    schedule 21.09.2018
comment
ниже я написал некоторый код, помещающий ваш сайдав-реагирующий материал в один пользовательский компонент, скажем, Resuableside nav.. и импортирующий в ваш компонент HOME или компонент DASHBOARD и т. д. надеюсь, что это поможет вам   -  person Shiva Sai    schedule 21.09.2018
comment
О да, я думал не так...   -  person Benjamin Sanvoisin    schedule 21.09.2018

Ответы (1)


arrow_upward
0
arrow_downward

вы можете написать такой код

ReusableSideNav.js

import 'react' from 'React'
import sideNave from 'react/materialcomponent'

class ResusableSideNav extends React.component {
    render(){
        return(
            <SideNav
                trigger={<Button></Button>}
                options={{ closeOnClick: true }}
            >
                <SideNavItem userView
                        user={{
                        background: 'img/office.jpg',
                        image: 'img/yuna.jpg',
                        name: this.Prop1.value,
                        email: this.Prop2.value
                    }}
                />
            </SideNav>
        )
    }
}

Home.js

import 'react' from 'React'
import ResuableSideNav from the "address where you worte"

class Home extends React.Component {
    render(){
        <ResuableSideNav prop1={value} {...otherProps}/>
    }
}
person Shiva Sai    schedule 21.09.2018