我正试图为react漂亮的dnd库编写Fable绑定器，但我一直纠结于如何绑定Droppable组件，因为它需要一个创建子组件的函数，而不是像大多数其他组件那样直接提供子组件。
我引用的是这个react示例，其中的组件看起来是这样的(参见链接上的第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的功能，而不是直接提供孩子。以下是我目前所拥有的：
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 []
我直接创建了快照并提供了类型，而不是试图导入它们，因为我确信我只需要具有正确属性的东西作为childrenFn函数的参数。
最后，这里有一个使用我定义的droppable组件的组件，提供了一个创建子元素的函数：
[<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文档的"Children Function"部分(。堆栈跟踪显示这个函数是从react-beautiful-dnd调用的，所以我至少可以合理地确定我正在加载&执行库。
因此，框架似乎正确地调用了该函数，但使用了null参数。我不知道这个错误是因为绑定错误、构建组件错误、没有导入正确的东西，还是在使用导入的库时出现了其他错误。
完整的源代码可在此处获得。我把这整件事放在一个DragDropContext中，它似乎毫无问题地绑定在一起。
我没有任何Fable/Rect的经验，所以我可能还差得很远，但这个F#代码对我来说很可疑：
type IDroppableAttribute = interface end
unbox<IDroppableAttribute>("children", f)
在正常的运行时环境中，这将抛出一个InvalidCastException，因为Tuple类型没有实现IDroppableAttribute。我不知道当它被翻译成Javascript时会发生什么，但我怀疑它在那里也不起作用。
您在JavaScript中看到的是一个渲染道具。
您只需在一个名为render的新道具中包含与您的签名匹配的内容：childrenFn: (DroppableProvided * DroppableStateSnapshot) -> ReactElement
我没有试过，但通常都是这样。此外，我建议阅读react网站，因为当使用寓言时，它有助于了解围栏另一边发生了什么。