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，其中标签（“类型”，“标签”，“值”和“ id”）在项目符号列表中以粗体显示，但没有找到简单的方法的方法。这是我的地图功能：

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

谢谢。

Answer 1

只需在具有适当类的label或node或span中使用strong的{{1}}属性，然后使用{ {1}}（大概是？）在NODE GOES HERE位：

其他一些注意事项：

您将需要value属性（最好的选择是使用节点上的{this.state.nodes.map((node, index) => ( <li><strong>{node.label}</strong>: {node.value}</li> ))}）
如果您愿意在参数列表中使用destructuring
如果您不打算使用key参数，则不需要

考虑到这些：

id

（参数中的index是解构。）

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

1 个答案: