传递处理程序组件（在变量中定义）

Question

与react-router - pass props to handler component类似，但在我的情况下，我的组件是在变量中声明的elem.component，我试图构建一个传递showModal函数的路由数组。

这是我到目前为止已经试过

routes.push(
    <Route key={elem.to} exact path={elem.to} 
    component={elem.component} showModal={this.props.showModal}/>) 

我一直在寻找的答案，其他的渲染方法，但他们在这我不我的情况下具有的功能定义的组件。

Answer 1

使用功能结合

<Route exact path="/" component={() => (<Component prop={val} />) }/>

Answer 2

您必须分配组件大写变量JSX使用它只是传递组件 - 请对此做出何种反应docs约在运行时定义的元素类型的更多细节。请试试这个：

<Route key={elem.to} exact path={elem.to} 
    render={() => { 
     const MyComponent = elem.component; 
     return <MyComponent showModal={someValue} /> 
    }} 

/>