我在具有许多嵌套数据和状态的大型应用程序中使用React / ImmutableJS。一些“嵌套”数据通过props传递给子组件。
子组件处理像局部变量这样的道具(因为道具是不可变的,所以没有突变):它们将新的副本返回到更新其自身状态的父组件。
一个简单的例子:
const user = Immutable.Map({
name: '...',
accessRights: Immutable.Map({
preferences: true,
contact: false,
....
})
});
class Admin extends Component {
state = { user };
render() {
return <AccessRights
rights={user.get('accessRights')}
onRightsChange={newRights =>
this.setState({ user: user.set('accessRights', newRights) })
}
/>
}
}
class AccessRights extends Component {
render() {
const { rights, onRightsChange } = this.props;
return <div>
{rights.entrySeq().map(([key, value]) =>
<input
key={key}
type='checkbox'
checked={value}
onChange={e => onRightsChange(rights.set(key, e.target.checked))}
/>
)}
</div>
}
}
这有意义吗?