为什么我们可以在函数 react 中使用任何 prop 名称而不明确提及？

Question

我正在学习 mobX-state-tree，在他们的教程代码中，我看到了这个

const App = observer(props => (
  <div>
    <button onClick={e => props.store.addTodo(randomId(), "New Task")}>
      Add Task
    </button>
    {values(props.store.todos).map(todo => (
      <div key={todo.id}>
        <input
          type="checkbox"
          checked={todo.done}
          onChange={e => todo.toggle()}
        />
        <input
          type="text"
          value={todo.name}
          onChange={e => todo.setName(e.target.value)}
        />
      </div>
    ))}
  </div>
));

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

我有点懵，哪里提到了store？为什么我们可以使用 store 作为道具，而不是 prop={store}，例如，如果我将商店更改为其他内容，比如“abcxyz”，那么它会出错 Cannot read properties of undefined (reading 'todos')。那么为什么我们在这里有商店。请告诉我，非常感谢

他们的代码：https://codesandbox.io/s/310ol795x6?file=/index.js

他们的教程，这是选择 “进入 UI” : https://mobx-state-tree.js.org/intro/getting-started

Answer 1

你应该 post 你想做什么，但我认为你需要了解 javascript 对象的基础知识以及 React 的工作原理。

您可以使用任何名称作为道具。但是如果你选择prop={any object}。您必须在您的应用程序观察器中使用它：

const App = observer(props => (
  <div>
    <button onClick={e => props.prop.addTodo(randomId(), "New Task")}>
      Add Task
    </button>
    {values(props.prop.todos).map(todo => (

花括号内传递的值也可以是任何值，在这种情况下，它们将商店定义为

const store = RootStore.create({
  users: {},
  todos: {
    "1": {
      id: id,
      name: "Eat a cake",
      done: true
    }
  }
});

如果你使用

<App store={store} />

观察者内部的道具对象将是

{
  store: {
    users: {},
      todos: {
        "1": {
          id: id,
          name: "Eat a cake",
          done: true
        }
      }
  }
}

现在如果你使用

<App prop={store} />

观察者内部的道具对象将是

{
      prop: {
        users: {},
        todos: {
          "1": {
            id: id,
            name: "Eat a cake",
            done: true
           }
          }
      }
    }

如您所见，您不再拥有属性商店，因此如果您保留 props.store.todos，则属性商店未定义。

干杯。

为什么我们可以在函数 react 中使用任何 prop 名称而不明确提及？

Why we can use any prop name in function react without explicit mention?

javascript

reactjs

react-native

mobx-state-tree