观察者如何获得道具？

Question

我可以理解 TodoListView 如何在其观察者中接收 { todoList } 因为它的道具被

引用

render(<TodoListView todoList={store} />, document.getElementById("root"));

但我不明白 TodoView 如何在其观察者中接收 { todo } 因为它的 props 没有像 TodoListView

那样被引用

import * as React from "react";
import { render } from "react-dom";
import { observer } from "mobx-react-lite";
import Todo from "./Todo";
import TodoList from "./TodoList";

const TodoListView = observer(({ todoList }) => (
  <div>
    <ul>
      {todoList.todos.map((todo) => (
        <TodoView todo={todo} key={todo.id} />
      ))}
    </ul>
    Tasks left: {todoList.unfinishedTodoCount}
  </div>
));

const TodoView = observer(({ todo }) => (
  <li>
    <input
      type="checkbox"
      checked={todo.finished}
      onClick={() => todo.toggle()}
    />
    {todo.title}
  </li>
));

const store = new TodoList([
  new Todo("Get Coffee"),
  new Todo("Write simpler code")
]);

render(<TodoListView todoList={store} />, document.getElementById("root"));

TodoView 是如何得到 { todo } 的？ Codesandbox

Answer 1

从字面上看，当你映射它们时，你将每个待办事项作为 TodoView 的道具传递：

    <ul>
      {todoList.todos.map((todo) => (
        // Right here `todo={todo}`
        <TodoView todo={todo} key={todo.id} />
      ))}
    </ul>

观察者如何获得道具？

How do observers receive props?

reactjs

mobx