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并触发放置

1 个答案: