函數參數中的解構如何工作

Question

我試圖對此進行搜索，但到目前為止還沒有運氣。 我看過網上的銷毀信息。 我不明白這種破壞性的局部模式。

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

函數的參數定義中的{todos，actions}是做什么的？ 它是從什么要做的事情和采取的行動？

Answer 1

如果在App函數中像App({todos:10,actions:{addTodo: addTodoFunction}})這樣調用App App({todos:10,actions:{addTodo: addTodoFunction}})則todos和actions的參數分別分配給10和{addTodo: addTodoFunction} 。 因此actions.addTodo成為addTodoFunction 。 更多有關對象分解的內容 。

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因為箭頭函數中包含多個語句。