实现用于动态计算/瞬态的getter

Question

我将在未来的项目中采用React，并普遍喜欢它。

我有一个关于访问我称之为"动态状态属性"的架构/设计问题

想象一下React组件：

class App extends React.Component {
constructor(props) {
super(props);
this.state = {device: {id: null}};
}
}

现在我想知道我的设备是否已注册。

对我来说，显而易见的实现是向组件添加一个getter：

get deviceRegistered() {
return (this.state.device.id !== null);
}

但是我该如何在组件层次结构中访问它呢？

React的体系结构对我来说很有意义，但我在这一点上很挣扎。

我不想将我的状态定义为：

this.state = {device: {id: null, registered: false}}

这闻起来很糟糕，因为对我来说，设备当前是否注册是当前状态的副产品。以这种方式将registered添加到state会创建另一个属性，以便在应该能够在任何点导出值时进行维护。。。但我就是不知道怎么做。

我也不希望树下的组件这样做：

if (this.props.deviceId !== null) {
// do something, we have a device ID so we're registered
}

因为在未来，注册设备的标准可能会发生变化。

那么，实现这一目标的"反应方式"是什么呢？我不相信我能在不干扰setState(...)对象合并的情况下将getter直接嵌入到状态对象文本中，我正在努力想出一个替代解决方案，它不是代码味，而且嵌套在树下的组件很容易访问。

Answer 1

react中没有"getter"。子组件有两种方法可以获得父组件的状态。第一种是通过道具将状态传递给孩子：

<Child deviceId={this.state.device.id} />

第二种方法是将状态存储在全局状态管理器中。新的Context API与新的挂钩配合得很好(我强烈推荐(。或者你可以使用redux之类的东西来保持全局状态。