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中使用它 - 请查看此React docs以获取有关在运行时定义元素类型的更多详细信息。请试试这个：

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

/>

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

2 个答案: