Question

我有一个基本组件，如下所示：

import React from 'react'
import MapContainer from '../containers/Map'
import ControlPanelContainer from '../containers/ControlPanel'
import Sidebar from 'react-sidebar'

const App = () => (
    <div className = "sidebar">
        <Sidebar sidebar = {<div className = "control-panel"><ControlPanelContainer /></div>}
                 docked = {true}
                 pullRight={false}
                 shadow = {false}>
            <div className = "map">
                <MapContainer/>
            </div>
        </Sidebar>
    </div>
)

export default App

MapContainer基本上会创建一个带有一堆可点击标记的react-google-map组件。单击时，该标记的键和位置数据将放在数据存储中的列表中。

ControlPanelContainer基本上可以在地图旁边以文本格式显示该列表。

当我点击标记时，通过查看浏览器中的反应开发工具，我可以看到我的列表已成功更新了相应的数据。但是这些更改不会传播到ControlPanelContainer视图。这是因为更新代码的MapContainer部分中的状态的函数不会绑定到ControlPanelContainer的实例（我认为），即props.onMarkerClick：

<Marker
    {...marker}
    onClick = {() => props.onMarkerClick(marker)}
/>

我的问题是如何将一个组件内的函数绑定到一个单独的组件？大多数在线教程似乎都关注以下内容：

this.component = this.component.bind(this)

即。将组件绑定到自身。我的第一个直觉是在与App类相同的文件中创建更新函数，并将它们作为道具传递给ControlPanelContainer和MapContainer。然而，连接方法似乎并不适合传入其中的道具。

const MapContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Map)

我不确定这是否是一个优雅的解决方案，或者我的代码的当前结构是否表明我没有考虑过“反应”。方式。

Answer 1

所有行动都应通过减速机。在redux中没有从组件到组件的直接操作。

因此，您需要做的是在单击标记时触发操作，这将从相应的缩减器生成新状态。反过来，状态更新将使绑定属性更新，因此在ControlPanelContainer中你应该有一个markers道具（或等效物）加上这样的东西：

function mapStateToProps(state) {
    return {
        markers: state.xxx.yyy;
    };
}

xxx是标记的reducer的名称，yyy是包含状态标记的对象。

Redux中state.xxx的任何更新都会在您的组件中触发markers道具更改。

与单独组分结合会发生反应

1 个答案: