我正在使用ui-router(角度和反应)在角度应用下构建一个反应应用。在角度应用程序下,左右面板有一个嵌套视图。因此,当您单击左侧面板上的项目时,它将在右侧面板上显示详细信息。
当前,我正在使用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
组件将呈现并显示其中的detail组件。但是知道如何在react-hybrid或其他解决方法中传递自定义道具吗?