使用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的例子：傳遞一個包含道具的對象。