如何在箭頭函數內部分配外部var？

Question

我正在嘗試為箭頭函數之外定義的變量賦值，如下所示：

    let leftPanel: PerspectivePanel;
    let rightPanel: PerspectivePanel;

    let temp = L.withFlex(1, L.box(direction, [
      L.withFlex(
          1,
          element => {
            element.className = 'gllayoutcell noselect';
            leftPanel = new PerspectivePanel(display, element, perspectiveViewerState);
            this.registerDisposer(leftPanel);
          }),
      L.withFlex(
          1,
          element => {
            element.className = 'gllayoutcell noselect';
            rightPanel = new PerspectivePanel(display, element, perspectiveViewerState2);
            this.registerDisposer(rightPanel);
          }),
    ]))(rootElement);

    leftPanel.otherRenderedDataPanel = rightPanel;
    rightPanel.otherRenderedDataPanel = leftPanel;

但編譯器給出了在定義之前使用變量的錯誤。 如何讓外部的變量可見？

編輯：我不明白箭頭函數如何在它下面的兩個賦值之后被調用。 因為很明顯它在它們之前被調用，元素是rootElement。

Answer 1

編譯器抱怨，因為leftPanel和rightPanel可能尚未分配。 這是因為它們首先在你的一個箭頭函數中分配，在編譯時它們將被調用時是未知的。

我假設您使用strictNullChecks: true 。 在這種情況下，您可以通過明確聲明兩個變量中的每一個都可以是undefined然后使用類型斷言來解決此問題：

let leftPanel: PerspectivePanel | undefined;
let rightPanel: PerspectivePanel | undefined;

...

leftPanel!.otherRenderedDataPanel = rightPanel!;
rightPanel!.otherRenderedDataPanel = leftPanel!;

Answer 2

我通過將reft和右面板定義為類屬性來解決了這個問題，並且在箭頭函數內部我可以做到這一點this.rightPanel.otherPanel = leftPanel 。 我仍然不知道為什么其他方法不起作用，但這對我來說是一種解決方法。