用於 react-beautiful-dnd 拋出錯誤構建 Droppable 的寓言綁定

Question

我正在嘗試為react-beautiful-dnd庫編寫 Fable 活頁夾，但我一直堅持如何綁定Droppable組件，因為它需要 function 來創建子級，而不是像大多數其他組件一樣直接提供子級。

我正在引用這個反應示例，其中組件看起來像這樣（參見該鏈接上的第 70 行）：

render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="droppable">
          {(provided, snapshot) => (
            <div
              {...provided.droppableProps}
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
            >
              {this.state.items.map((item, index) => (
                 <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style
                      )}
                    >
                      {item.content}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );

因此，我需要提供(DroppableProvided, DroppableStateSnapshot) -> ReactElement的 function ，而不是直接提供孩子。 這是我到目前為止所擁有的：

type DroppableStateSnapshot = {
    isDraggingOver : bool
}

type DroppableProvided = {
    innerRef : Browser.Types.Element -> unit
}

type IDroppableAttribute = interface end
type droppable =
    static member inline droppableId (id : string) = unbox<IDroppableAttribute>("droppableId", id)
    static member inline childrenFn (f : (DroppableProvided * DroppableStateSnapshot) -> ReactElement) =
        unbox<IDroppableAttribute>("children", f)

[<Erase>]
type Droppable() =
    static member inline droppable (id : string) props (childrenFn: (DroppableProvided * DroppableStateSnapshot) -> ReactElement) =
        let _id = droppable.droppableId id
        let f = droppable.childrenFn childrenFn
        let props = keyValueList CaseRules.LowerFirst (_id :: (f :: props))
        ofImport "Droppable" "react-beautiful-dnd"  props []

我直接創建了快照並提供了類型，而不是嘗試導入它們，因為我很確定我只需要具有正確屬性的東西，例如 arguments 到childrenFn function。

最后，這里是一個使用我定義的droppable組件的組件，提供一個function來創建子元素：

[<ReactComponent>]
let TestDroppable() =
  Droppable.droppable "test-droppable" [] (fun (provided, snapshot) ->
    div [ Ref provided.innerRef ] [
      BuildDraggable 0 [p [] [ str "This is the first item"]]
      BuildDraggable 1 [p [] [ str "This is the second item"]]
      BuildDraggable 2 [p [] [ str "This is the third item"]]
      BuildDraggable 3 [p [] [ str "This is the fourth item"]]
    ])

當我在瀏覽器中運行它時，我收到Uncaught TypeError: provided is undefined錯誤，指向我設置Ref屬性的行。 我這樣做是因為文檔說您必須提供一個ref值（請參閱我鏈接的 Droppable 文檔的“兒童功能”部分）。 堆棧跟蹤顯示這個 function 是從react-beautiful-dnd調用的，所以我至少可以合理地確定我正在加載和執行庫。

因此，似乎框架正在正確調用 function，但使用 null arguments。 我不知道這個錯誤是因為綁定錯誤、構建組件錯誤、沒有導入正確的東西，還是在使用導入的庫時出現其他一些錯誤組合。

完整的源代碼可在此處獲得。 我將整個事情放在DragDropContext中，這似乎可以毫無問題地綁定。

Answer 1

我沒有任何 Fable/React 經驗，所以我可能會走得很遠，但是這個 F# 代碼對我來說似乎很可疑：

type IDroppableAttribute = interface end

unbox<IDroppableAttribute>("children", f)

在正常的運行時環境中，這將拋出InvalidCastException ，因為Tuple類型沒有實現IDroppableAttribute 。 我不知道當它被翻譯成 Javascript 時會發生什么，但我懷疑它也不會在那里工作。

Answer 2

您在 JavaScript 中看到的是渲染道具。

您應該簡單地在一個名為render的新道具中包含與您的簽名匹配的內容： childrenFn: (DroppableProvided * DroppableStateSnapshot) -> ReactElement

我沒有嘗試過，但通常是這樣的。 我還建議閱讀react 網站，因為它有助於了解使用 fable 時柵欄另一邊發生的事情。