使用Javascript - 阵营解构阵列

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(...) 

我认为只有在这样一个解构的对象可用。你能否透露一下上述两者是如何相等的？是否有特定的反应？

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对象。同一个对象可以被解构为IngedientsList函数的参数。

你可以在this explanation中找到另一个使用React.createFactory的例子：传递一个包含道具的对象。