![](/img/trans.png)
[英]How to pass props into component from react-router Switch statement
[英]How to pass props on React Router Component?
在React Router中,我们这样做:
<BrowserRouter>
<Route path="/(:filter)?" component={App} />
</BrowserRouter>
用这样的组件。
<MuiThemeProvider>
<QueryRenderer
environment={modernEnvironment}
query={graphql`
query appQuery($count: Int! $cursor: String) {
viewer {
...TodoApp_viewer
}
}
`}
variables={{ count: 5, cursor:'' }}
render={({error, props}) => {
if (props) {
return <TodoApp viewer={props.viewer} />;
} else {
return <div>Loading</div>;
}
}}
/>
</MuiThemeProvider>
如何在路线中通过? 我想到了将它分配给这样的变量:
var myComponent = <MuiThemeProvider>
<QueryRenderer ..../> </MuiThemeProvider>
但是我必须传递if语句上的props。 这是我不起作用的解决方案
const todoApp = <MuiThemeProvider>
<QueryRenderer
environment={modernEnvironment}
query={graphql`
query appQuery($count: Int! $cursor: String) {
viewer {
...TodoApp_viewer
}
}
`}
variables={{ count: 5, cursor:'' }}
render={({error, props}) => {
if (props) {
return <TodoApp viewer={props.viewer} />;
} else {
return <div>Loading</div>;
}
}}
/>
</MuiThemeProvider>;
ReactDOM.render(
<Switch>
<Route exact path='/' component={todoApp}/>
</Switch>
,
mountNode
);
救命?
有HOC吗?
class MuiThemeProviderContainer {
render() {
<MuiThemeProvider>
<QueryRenderer
environment={modernEnvironment}
query={graphql`
query appQuery($count: Int! $cursor: String) {
viewer {
...TodoApp_viewer
}
}
`}
variables={{ count: 5, cursor:'' }}
render={({error, props}) => {
if (props) {
return <TodoApp viewer={props.viewer} />;
} else {
return <div>Loading</div>;
}
}}
/>
</MuiThemeProvider>
}
}
ReactDOM.render(
<Switch>
<Route exact path='/' component={MuiThemeProviderContainer}/>
</Switch>,
mountNode
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.