# 标识 State 节点
默认情况下,状态节点的 id
是其区分的完整路径。 你可以使用这个默认的 id
来指定一个状态节点:
const lightMachine = createMachine({
id: 'light',
initial: 'green',
states: {
green: {
// 默认 ID: 'light.green'
on: {
// 你可以按默认 ID 定位状态节点。
// 这与 TIMER 相同:'yellow'
TIMER: { target: '#light.yellow' }
}
},
yellow: {
on: {
TIMER: { target: 'red' }
}
},
red: {
on: {
TIMER: { target: 'green' }
}
}
}
});
# 相关目标
通过指定一个点('.'
)后跟它们的键,可以相对于它们的父节点来定位子状态节点:
const optionsMachine = createMachine({
id: 'options',
initial: 'first',
states: {
first: {},
second: {},
third: {}
},
on: {
SELECT_FIRST: { target: '.first' }, // resolves to 'options.first'
SELECT_SECOND: { target: '.second' }, // 'options.second'
SELECT_THIRD: { target: '.third' } // 'options.third'
}
});
默认情况下,相对目标是 内部转换,这意味着父状态将 不 退出并重新进入。 你可以通过指定 internal: false
来使相对目标外部转换:
// ...
on: {
SELECT_FIRST: {
target: { target: '.first' },
internal: false // 外部转换,将退出/重新进入父状态节点
}
}
# 自定义 ID
可以通过唯一标识符而不是相对标识符来定位状态节点。 这可以简化复杂状态图的创建。
要为状态节点指定 ID,请提供唯一的字符串标识符作为其 id
属性,例如,id: 'greenLight'
。
要通过 ID 定位状态节点,请在其字符串 ID 前添加 #
符号,例如,TIMER: '#greenLight'
。
const lightMachine = createMachine({
id: 'light',
initial: 'green',
states: {
green: {
// 自定义 id
id: 'greenLight',
on: {
// 目标状态节点通过其 ID
TIMER: { target: '#yellowLight' }
}
},
yellow: {
id: 'yellowLight',
on: {
TIMER: { target: '#redLight' }
}
},
red: {
id: 'redLight',
on: {
// 相对目标仍然有效
TIMER: { target: 'green' }
}
}
}
});
笔记:
- 始终建议为根状态节点使用 ID。
- 确保所有 ID 都是唯一的,以防止命名冲突。 这自然由自动生成的 ID 强制执行。
注意
不要将自定义标识符与相对标识符混合使用。 例如,如果上面的 red
状态节点有一个自定义的 "redLight"
ID 和一个子 walking
状态节点,例如:
// ...
red: {
id: 'redLight',
initial: 'walking',
states: {
// ID 仍然解析为“light.red.walking”
walking: {/* ... */},
// ...
}
}
// ...
那么你就不能通过 '#redLight.walking'
定位 'walking'
状态,因为它的 ID 被解析为 '#light.red.walking'
。 以'#'
开头的目标将始终引用 '#[state node ID]'
的 完全匹配。
# 快速参考
默认自动生成 ID:
const lightMachine = createMachine({
id: 'light',
initial: 'green',
states: {
// ID: "light.green"
green: {
/* ... */
},
// ID: "light.yellow"
yellow: {
/* ... */
},
// ID: "light.red"
red: {
/* ... */
}
}
});
自定义 ID
// ...
states: {
active: {
id: 'custom-active', // can be any unique string
// ...
}
}
通过 ID 定位到 state:
// ...
on: {
EVENT: { target: '#light.yellow' }, // 目标到默认 ID
ANOTHER_EVENT: { target: '#custom-id' } // 目标到自定义 ID
}