如何将操作传递给Elm中的子组件
我刚试了几天埃尔姆，遇到了一种我不知道的常见情况。
我有一个包含项目列表的父组件。为了呈现列表，我有一个子组件，以便父组件调用传入地址和模型的子元素的视图函数。由于Action类型不同，我认为编译器正在抱怨这一点，但我真的不确定。
父组件：
type alias Model = List ToDoItem.Model
type Action
= Remove Int
update : Action -> Model -> Model
update action model =
case action of
Remove id ->
List.filter (\todo -> todo.id /= id) model
view : Signal.Address Action -> Model -> Html
view address model =
let
buildToDos =
List.map (ToDoItem.view address) model
in
div [] [ buildToDos ]儿童部分：
type alias Model =
{ id : Int
, name : String
, description : String
, complete: Bool
}
type alias ID = Int
type Action
= Toggle Bool
update : Action -> Model -> Model
update action model =
case action of
Toggle toggle ->
if toggle == True then
{ model | complete = False }
else
{ model | complete = True }
view : Signal.Address Action -> Model -> Html
view address model =
let
toggleText : Bool -> String
toggleText complete =
case complete of
True -> "Incomplete"
False -> "Complete"
in
div
[ class "wrapper" ]
[ span [] [ text ("[" ++ toString model.id ++ "]") ]
, span [ class "name" ] [ text model.name ]
, div [ class "description" ] [ text model.description ]
, a [ onClick address (Toggle model.complete)] [ text (toggleText model.complete)]
]编译器错误：
-- TYPE MISMATCH ----------------------------------------------
The type annotation for `view` does not match its definition.
20│ view : Signal.Address Action -> Model -> Html
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The type annotation is saying:
Address Action -> List ToDoItem.Model -> Html
But I am inferring that the definition has this type:
Address ToDoItem.Action -> List ToDoItem.Model -> Html
-- TYPE MISMATCH ----------------------------------------------
The 2nd argument to function `div` is causing a mismatch.
26│ div [] [ buildToDos ]
^^^^^^^^^^^^^^
Function `div` is expecting the 2nd argument to be:
List VirtualDom.Node
But it is:
List (List Html)如何正确声明子组件的视图函数，或者如何从父函数正确地将参数传递给子组件的视图函数？
实际上，我并不想将任何操作传递给子组件--我只想呈现它。子组件中的操作用于那里的onClick。
再说一次，也许我离得太远了，因为这是我榆树生命的第二天。
回答 2
Stack Overflow用户
发布于 2016-03-03 07:27:06
榆树建筑教程涵盖子视图问题。再看看示例4是如何实现的。
简而言之，您需要在父操作中包含一个包含子操作的操作：
type Action = Remove Int | ToDo Int ToDoItem.Action您需要将此操作转发到update中的适当项。
在view中，您需要为每个ToDoItem视图创建一个转发地址。
view : Signal.Address Action -> Model -> Html
view address model =
let
fwd idx = Signal.forwardTo address (ToDo idx)
toDoList =
List.indexedMap (\(idx, m) -> ToDoItem.view (fwd idx) m) model
in
div [] toDoList请注意，您的旧buildToDos已经是一个列表，并且表示[buildToDos]实际上表示的是List (List Html)，这就是为什么您得到了第二个错误。
Stack Overflow用户
发布于 2016-03-03 07:34:10
编译器已经告诉了你答案。首先，
Address Action -> List ToDoItem.Model -> Html这里的操作必须指定给子操作。只需像编译器告诉您的那样修复它：
view : Signal.Address TodoItem.Action -> Model -> Html
第二，因为buildToDos已经是一个列表，所以您只需要：div [] buildToDos
花点时间来理解类型注释并仔细地跟随编译器，那么你就应该能够自己解决这类问题了。
https://stackoverflow.com/questions/35763879
复制相似问题
腾讯云开发者
