Javascript - React 解构数组

Question

我正在尝试学习 ReactJS，但在理解以下代码片段中发生的解构时遇到了一些困难:

const IngredientsList = ({ list }) =>  
    React.createElement('ul', null,
      list.map((ingredient, i) =>
        React.createElement('li', {key: i}, ingredient))

const Ingredients = React.createFactory(IngredientsList)
const list = [
     "1 lb Salmon",
     "1 cup Pine Nuts",
     "2 cups Butter Lettuce",
 ]    

这应该等同于:

 const IngredientsList = props =>
  ....
     props.list.map(...)

我认为只有在一个对象上才可以进行这样的解构。您能否阐明以上两者是如何等效的？是否有特定的 react ？

Answer 1

让我们格式化您的示例并添加一行来展示如何使用它:

const IngredientsList = ({list}) => {
  return React.createElement("ul", null, list.map((ingredient, i) => {
    return React.createElement("li", {key: i}, ingredient)
  }))
}

const Ingredients = React.createFactory(IngredientsList)
const list = [
  "1 lb Salmon",
  "1 cup Pine Nuts",
  "2 cups Butter Lettuce",
]

// usage:
Ingredients({list})

如您所见，您传递给 Ingredients 的是 props Object。同一个对象可以作为 IngedientsList 函数的参数被解构。

您可以在 this explanation 中找到另一个使用 React.createFactory 的例子:传递一个包含 props 的对象。