那里!App 组件是三个不同组件的容器:
Map
呈现带有视觉标记的地图,表示用户提供的地址。List
组件包含所有添加的地址作为列表项。Input
允许用户添加一个新地址(在我的术语中称为LocationPoint)。
现在,所有这些地址( LocationPointsApp
)保持locations
数组处于状态,并将该数组传递给所有子组件。
对 LocationPoints 的操作(添加/移动/更新/删除位置点)被提取到单独的函数中,因为它们非常通用,以后可能会在其他地方重用。
但是因为这些函数不知道状态的存在,所以我必须创建某种“提供者”函数来调用这些操作(addLocationPoint、deleteLocationPoint 等)。例如addLocationPoint
func 必须在里面调用App.addLocationPoint
。
下面的例子应该更好地解释我在说什么。注意:片段不起作用,因为它不是真正的实现。
// Adds a new location point
const addLocactionPoint = (locations: array, address: string) => {
// ...
return updatedLocations;
}
class App extends React.Component {
constructor() {
this.state = {
locations: [],
}
// bind addLocPoint, etc.
}
addLocPoint(address) {
this.setState(state => {
addLocactionPoint(state.locations, address);
});
}
// ...
render() {
return (
<Input onSubmit={ this.addLocPoint } />
<List
onDrag={ this.moveLocPoint }
onDelete={ this.deleteLocPoint }
/>
<Map data={ this.state.locations } />
);
}
}
我的方法可以被认为是一种好的做法吗?或者还有其他方法可以减少 App 组件中的逻辑数量并避免在不使用状态管理库(MobX、Redux 等)的情况下创建那些“提供者”。也许我认为是引入 Redux 或 MobX 的合适时机?
我将非常感谢您提供有关此问题的建议或建议或链接。