# 识别状态节点

¥Identifying State Nodes

这些 XState v4 文档不再维护

XState v5 现已推出！阅读有关 XState v5 的更多信息 (opens new window) 和查看 XState v5 文档 (opens new window)。

¥XState v5 is out now! Read more about XState v5 (opens new window) and check out the XState v5 docs (opens new window).

🚀快速参考

¥🚀 Quick Reference

默认情况下，状态节点的 id 是其分隔的完整路径。你可以使用默认的 id 来指定状态节点：

¥By default, a state node's id is its delimited full path. You can use this default id to specify a state node:

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      // default ID: 'light.green'
      on: {
        // You can target state nodes by their default ID.
        // This is the same as TIMER: 'yellow'
        TIMER: { target: '#light.yellow' }
      }
    },
    yellow: {
      on: {
        TIMER: { target: 'red' }
      }
    },
    red: {
      on: {
        TIMER: { target: 'green' }
      }
    }
  }
});

# 相对目标

¥Relative Targets

子状态节点可以通过指定一个点（'.'）后跟其键来相对于其父节点进行定位：

¥Child state nodes can be targeted relative to their parent by specifying a dot ('.') followed by their key:

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 进行相对目标外部转换：

¥By default, relative targets are internal transitions, which means the parent state will not exit and reenter. You can make relative targets external transitions by specifying internal: false:

// ...
on: {
  SELECT_FIRST: {
    target: '.first',
    internal: false // external transition, will exit/reenter parent state node
  }
}

# 自定义 ID

¥Custom IDs

状态节点可以通过唯一标识符而不是相对标识符来定位。这可以简化复杂状态图的创建。

¥State nodes can be targeted via unique identifiers, instead of by relative identifiers. This can simplify the creation of complex statecharts.

要指定状态节点的 ID，请提供唯一的字符串标识符作为其 id 属性，例如 id: 'greenLight'。

¥To specify an ID for a state node, provide a unique string identifier as its id property, e.g., id: 'greenLight'.

要通过 ID 定位状态节点，请将 '#' 符号添加到其字符串 ID 之前，例如 TIMER: '#greenLight'。

¥To target a state node by its ID, prepend the '#' symbol to its string ID, e.g., TIMER: '#greenLight'.

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      // custom identifier
      id: 'greenLight',
      on: {
        // target state node by its ID
        TIMER: { target: '#yellowLight' }
      }
    },
    yellow: {
      id: 'yellowLight',
      on: {
        TIMER: { target: '#redLight' }
      }
    },
    red: {
      id: 'redLight',
      on: {
        // relative targets will still work
        TIMER: { target: 'green' }
      }
    }
  }
});

注意：

¥Notes:

始终建议为根状态节点使用 ID。

¥IDs are always recommended for the root state node.
确保所有 ID 都是唯一的，以防止命名冲突。这自然是由自动生成的 ID 强制执行的。

¥Make sure that all IDs are unique in order to prevent naming conflicts. This is naturally enforced by the automatically generated IDs.

警告

不要将自定义标识符与相对标识符混合。例如，如果上面的 red 状态节点有一个自定义 "redLight" ID 和一个子 walking 状态节点，例如：

¥Do not mix custom identifiers with relative identifiers. For example, if the red state node above has a custom "redLight" ID and a child walking state node, e.g.:

// ...
red: {
  id: 'redLight',
  initial: 'walking',
  states: {
    // ID still resolves to 'light.red.walking'
    walking: {/* ... */},
    // ...
  }
}
// ...

那么你就无法通过 '#redLight.walking' 定位 'walking' 状态，因为它的 ID 已解析为 '#light.red.walking'。以 '#' 开头的目标将始终引用与 '#[state node ID]' 完全匹配的目标。

¥Then you cannot target the 'walking' state via '#redLight.walking', because its ID is resolved to '#light.red.walking'. A target that starts with '#' will always refer to the exact match for the '#[state node ID]'.

# 快速参考

¥Quick Reference

默认、自动生成的 ID：

¥Default, automatically generated ID:

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    // ID: "light.green"
    green: {
      /* ... */
    },
    // ID: "light.yellow"
    yellow: {
      /* ... */
    },
    // ID: "light.red"
    red: {
      /* ... */
    }
  }
});

自定义 ID

¥Custom ID

// ...
states: {
  active: {
    id: 'custom-active', // can be any unique string
    // ...
  }
}

通过 ID 定位状态节点：

¥Targeting state node by ID:

// ...
on: {
  EVENT: { target: '#light.yellow' }, // target default ID
  ANOTHER_EVENT: { target: '#custom-id' } // target custom ID
}

← 历史解释机器 →