我有很多这样的代码:
export const getNodeShapeSize = ({
scaleToFit,
compress,
expanded
}: {
scaleToFit: boolean;
compress: boolean;
expanded: boolean;
}): number => {
if (scaleToFit) {
return ShapeSizes.full;
}
if (compress && !expanded) {
return ShapeSizes.preview;
}
return ShapeSizes.expanded;
};
我想知道是否可以使用xstate清理它?我可以有3个州
scaleToFit
compressed
expnded
到目前为止,我有这个:
export const treeMachineConfig = Machine({
strict: true,
id: 'treefsm',
initial: TreeSFMActionTypes.Unkonwn,
states: {
unknown: {
on: {
scaleToFit: 'scaledToFit',
compress: 'compressed',
expand: 'expanded'
}
},
scaledToFit: {
on: {
compress: 'compressed',
expand: 'expanded'
}
},
compressed: {
on: {
scaleToFit: 'scaledToFit',
expand: 'expanded'
}
},
expanded: {
on: {
scaleToFit: 'scaledToFit',
compress: 'compressed'
}
}
}
});
但是价值在哪里呢?我会把它们放在上下文中吗?
答案 0 :(得分:0)
是的,您将它们放在context
(docs ?)中,看起来像这样:
import { Machine, assign } from 'xstate';
export const treeMachineConfig = Machine({
strict: true,
id: 'treefsm',
context: {
width: 0,
height: 0
},
initial: TreeSFMActionTypes.Unkonwn,
states: {
// ...
compressed: {
// Just an example: set to this size whenever 'compressed' state is entered
entry: assign({ x: 10, y: 10 }),
on: // ...
},
expanded: {
entry: assign({ /* ... */ }),
on: // ...
}
}
});