反应物化 SideNav 和触发器放置

Question

我一直在开发网站并尝试使用 react-materialize 的 SidNav。我有一个渲染了两个组件的路由器：

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

我想在多个组件中重复使用边栏，我该怎么做？

Answer 1

你可以这样写代码

ResusableSideNav.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}/>
    }
}

反应物化 SideNav 和触发器放置

react-materialize SideNav & trigger placement

javascript

materialize

reactjs