如何在 React Router 组件上传递道具？答案

【问题标题】：How to pass props on React Router Component?如何在 React Router 组件上传递道具？
【发布时间】：2017-06-24 23:28:28
【问题描述】：

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

帮助？

【问题讨论】：

你的意思是 props 在 QueryRenderer render 内？
@azium 我编辑了这个问题，是的。并将组件传递给反应路由器
那里的props来自relay而不是传入

标签： reactjs react-router relay

【解决方案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
);

【讨论】：