Question

我试图搜索这个但到目前为止没有运气。我查看了网络上的解构信息。我不理解这种破坏的这种部分模式。

const App = ({todos, actions}) => (
  <div>
    <Header addTodo={actions.addTodo} />
    <MainSection todos={todos} actions={actions} />
  </div>
)

在函数的param定义中，{todos，actions}在做什么？从中拉出什么待办事项和行动？

Answer 1

如果您在App函数中调用App({todos:10,actions:{addTodo: addTodoFunction}}) App，则todos和actions被分配到10和{{1} }} 分别。因此{addTodo: addTodoFunction}变为actions.addTodo。更多信息Object Destructuring。

Answer 2

这些是React传递给你的组件的道具：

<App todos={...} actions={...} />

所以你可以像这样编写没有解构的组件：

const App = (props) => (<div>
  <Header addTodo={props.actions.addTodo} />
  <MainSection todos={props.todos} actions={props.actions} />
</div>)

React将props作为对象传递给您的组件，并且解构从对象中提取属性，因此它是一个快捷方式！

您还可以通过两个步骤来构建道具：

const App = (props) => {
  const { todos, actions } = props
  return (<div>
    <Header addTodo={actions.addTodo} />
    <MainSection todos={todos} actions={actions} />
  </div>)
}

请注意，在最后一种情况下，您必须明确使用花括号和return，因为箭头函数中有多个语句。

解析如何在函数参数中起作用

2 个答案: