时间戳

首页 > 解决方案 > 我应该存储标签中使用的文本吗？

javascript - 我应该存储标签中使用的文本吗？

问题描述

我对 Web 开发很陌生，目前我正在使用 React JS 开发我的前端。

所以我有一个组件可以根据 JSON 数据动态呈现标签，

JSON 看起来像这样：

data:{
    name:"test123",
    toDoActivity:"coding",
}

这是我呈现标签的代码

Object.entries(data).map((aData)=>{
    return <div>
              <label>{aData[0]} : {aData[1]}<label>
           </div>
})

现在上面的代码将被渲染为

名称：test123

toDoActivity : 编码

这是代码框：https ://codesandbox.io/s/confident-microservice-s0sgy?file=/src/App.js

数据已正确呈现，但我想要的是用用户友好的文本呈现的数据，例如

名称：test123

待办事项：编码

我有一个想法在 JSON 中创建一个新属性“标签文本”，所以它变成这样：

data:{
    name:{value:"test123",text:"Name"},
    toDoActivity:{value:"coding",text:"To Do"},
}

但我不知道这样存储标签的文本是否是一个好主意，所以我来这里寻求您的建议或更好的解决方案，提前谢谢

标签： javascriptjsonreactjs

解决方案

Object.valuesObject.entries只是在这里令人困惑。使用对象数组作为数据：

import React from "react";
import "./styles.css";

const theData = [
  { value: "test123", text: "Name" },
  { value: "coding", text: "To Do" }
];
export default function App() {
  return theData.map((entry) => {
    return (
      <div>
        <label>
          {entry.text} : {entry.value}
        </label>
      </div>
    );
  });
}

推荐阅读