将道具动态传递给JSX元素

Question

我有一个x对象

const x = {
   d: {D: 10},
   f: {F: 11},
   g: {G: 12}
}

我想将所有值传递给div标签

<div D = {10} F = {11} G = {12}> </ div>

我怎么做最短的选择？

Answer 1

您需要做的就是从嵌套键中创建一个对象，然后将其传递给div。您可以使用Object.assign的扩展语法来做到这一点

const x = {
   d: {D: 10},
   f: {F: 11},
   g: {G: 12}
}

console.log(Object.assign({}, ...Object.values(x)))

根据上面的代码，您会这样做

<div {...Object.assign({}, ...Object.values(x))}> </ div>