在array.map输出中反应粗体类型标签

Question

我有一个React组件，它通过axios.get调用返回一个返回给JSON文件的数组。 我的输出是具有以下格式的对象数组：

{type: "tosca.resourceTypes.TPE", label: "BVI 610", value: "801070217_BVI610", id: "5bd4a1a4-f806-4355-bf34-1b4054c2881e"}

这是原始的get调用：

axios.get('MasterData.json').then(response => {
       const fullNodes = response.data.graph.nodes;
       const result = Object.keys(fullNodes).map(key => ({
          ...fullNodes[key],
          id: key
    }));

我需要在map函数中执行的操作是输出一个div，其中标签（“ type”，“ label”，“ value”和“ id”）在项目符号列表中为粗体，但找不到一种简单的方法这是我的地图功能：

{this.state.nodes.map((node, index) => (
        <li>{'LABEL GOES HERE IN BOLD}: {NODE GOES HERE</li>
    ))}

提前致谢。

Answer 1

只需在具有适当类的span或在strong或b使用node的label属性，并对NODE GOES HERE位使用value （大概是？）：

{this.state.nodes.map((node, index) => (
    <li><strong>{node.label}</strong>: {node.value}</li>
))}

其他一些注意事项：

• 您将需要key属性（最好的选择是使用节点中的id ）
• 如果您喜欢在参数列表中，可以使用解构
• 如果您不打算使用index参数，则不需要

考虑到这些：

{this.state.nodes.map(({label, value, id}) => (
    <li key={id}><strong>{label}</strong>: {value}</li>
))}

（参数中的{label, value, id}是解构。）