Cljs重新框架未按预期显示元素

问题描述

我正在尝试使用 Cljs 重新框架，其中我尝试在 UI 中显示具有以下功能的单元格，

(defn cell
      [{:keys [id value on-change]}]
      [(r/adapt-react-class Box) {:key              id
                                  :type             :number
                                  :ml               2
                                  :content-editable (nil? value)
                                  :on-change        on-change
                                  :border           "2px solid #10AF34"
                                  :width            "30px"
                                  :height           "30px"
                                  :align            "center"}
       value])

当我尝试直接从为渲染而调用的方法中调用该方法时，它工作，

(defn app
      []
      (cell {:id        "1-1"
             :value     nil
             :on-change #(js/alert "in cell 1 1")}))

然而，当我尝试将它包装在另一个方法中并调用时，它不起作用

(defn grid
      [data]
      (cell {:id        "1-1"
             :value     1
             :on-change #(js/alert "in cell 1 1")}))

(defn app
      []
      (grid (generate-data)))

如果有人想尝试一下，grid/cell 可用 here，应用程序/渲染功能可用 here。

解决方法

您的问题可能源于使用 // this will initiate the dialogbox render and // prevent the window from going back by returning false const backButtonPressed = async () => { leavePrompt(false); return false; } // this will open the prompt dialog box const leavePrompt = (endRoom) => { setOpenPrompt({open: true,action: endRoom ? "endRoom" : "leaveQuitely"}); } // render <Dialog open={openPrompt.open} aria-labelledby="interim-user-dialog-title"> <DialogContent dividers> <Typography variant="h6" gutterBottom> Are you sure? </Typography> </DialogContent> <DialogActions> <Button onClick={() => setOpenPrompt({...openPrompt,open: false})} color="primary"> Stay </Button> <Button onClick={() => history.push("/")} color="secondary"> Leave </Button> </DialogActions> </Dialog> // when allowedToGoBack state is true then call a method that will render the dialog box <Prompt when={true} title={"Alert"} message={() => allowedToGoBack ? backButtonPressed() && false : true} /> - 我不确定它是否有问题，但我要么 [(r/adapt-react-class Box) …] def 的结果并重用它，要么使用 {{ 1}} 语法。