首页 > 解决方案 > 在 react-hybrid 中传递自定义道具

问题描述

我正在使用 ui-router(角度和反应)在角度应用程序下构建一个反应应用程序。在 Angular 应用程序下,有一个嵌套视图,用于左右面板。因此,当您单击左侧面板上的项目时,它会在右侧面板上显示详细信息。

目前我正在使用 react-hybrid 并想让右面板(子)连接到左面板(父)。例如,单击右侧面板上的删除按钮将删除左侧面板中的项目。我的想法是将回调函数作为道具传递给右侧面板,例如UIView Pass Props & Propogate Changes To Children

但是,它不会传递自定义道具,而只会传递 react-hybrid 中的状态道具。这是我的代码。

在路线中,我有

.state('reactapp', {
  url: '/reactapps',
  component: reactapp
})
.state('reactapp.deatil', {
  url: '/detail',
  component: deatil
})

reactApp.js

render() {
   const leftPanel = <List list={this.list}/>;
   const rightPanel = (
      <UIView render={(Component, props) => <Component {...props} callback={someCallback} />} />
   );
   return <Layout leftPanelComponent={leftPanel} rightPanelComponent={rightPanel} />;
}

通过这样做,reactapp组件将渲染并显示其中的详细组件。但是知道如何在 react-hybrid 或其他解决方法中传递自定义道具吗?

标签: javascriptreactjsangular-ui-router

解决方案


推荐阅读