Question

我有一个Meteor / React应用程序，其中设置了以下React路由器：

<Router history={browserHistory}>
    <Route path="/app" component={AppWrapperContainer} >
        ...
        <Route path="/app/somepath" component={SomeComponentContainer} />
        ...
    </Route>
</Router>

SomeComponentContainer是一个容器组件，它从MongoDB收集数据并将其传递给SomeComponent（上面未显示）。我需要将SomeComponentContainer传递给通用包装器组件，我们将其称为GenericWrapper，使其看起来像这样：

<GenericWrapper component={SomeComponentContainer} />

和GenericWrapper将呈现传递给它的任何组件：

export default class GenericWrapper extends Component {
    ...
    render(){
        return (
            <{this.props.component} {...props} />
        );
    }
}

1）如何在React Router级别写入？ 2）如何为GenericWrapper编写接受该组件的内容？

Answer 1

很抱歉迟到的回复，我无法在评论中更新：）

这个想法大致如下，

为GenericWrapper定义一个高阶组件，如下所示，

export function GenericWrapper(Component) {
    class GenericWrapperComponent extends React.Component {
     ....
    }
}

并在路由器中，

<Router history={browserHistory}>
    <Route path="/app" component={AppWrapperContainer} >
        ...
        <Route path="/app/somepath" component=GenericWrapper(SomeComponentContainer) />
        ...
    </Route>
</Router>

如何从React Router传递组件作为prop？

1 个答案: