Question

在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来分配它：

var myComponent = <MuiThemeProvider> 
        <QueryRenderer ..../> </MuiThemeProvider>

但是我必须在if语句中看到那些道具。这是我无法解决的解决方案

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

帮助？

Answer 1

有了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
);

如何在React Router Component上传递道具？

1 个答案: