在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
);