在不知道对象键的情况下访问对象值

IT技术 javascript reactjs
2021-05-02 05:11:04

我确实完成了我的 reactjs 教程并开始制作一个将数据存储在 json 中的 web 应用程序。我能够从 json 数据中找到我的对象，并且该对象将表示如下内容：

var data={
    name:<h1>Ram</h1>,
    description:<p>I want to be a Developer</p>,
    contact:<ul><li>66546464/li><li>66546464/li></ul>,
    DOB:<h4>23.05.2017</h4>
    }

我需要以这种方式显示，但不使用像 

   {data.name or data.DOB}.

输出应该是这样的：

   <div>
       <h1>Ram</h1>
       <p>I want to be a Developer</p>
        <ul><li>66546464/li><li>66546464/li></ul>
        <h4>23.05.2017</h4>
    </div>

是否可以在不知道密钥的情况下显示值？如果是这样，请帮助我？

随时欢迎批评！

3个回答

以下是如何在 react.js 中做到这一点

<div>
  {Object.keys(data).map(key) => (
    <span key={key}>
      {data[key]}
    </span>
  )}
</div>

一个解释。Object.keys从您的对象中获取所有键，您映射它们并为每个返回一个<span>（注意键），并在每个跨度内通过其键从数据中获取值

您必须遍历对象的键并将其值附加为父 div 的子项。请考虑以下代码：

<div>
  {Object.keys(data).map(key => data[key])}
</div>

Object.keys将为您提供对象的键，map函数以数组格式返回键的所有值。它可以用 react JSX 编写，如上面的代码所示。

在没有 HTML 标签的情况下存储数据更有意义（使用标签存储是不好的做法，许多框架/库会尝试解析您的特殊字符并导致您在路上遇到麻烦）然后您可以访问视图中的原始数据键。

<h1>{data.name}</h1> <p>{data.description}</p> 等等

如果您坚决反对使用密钥，您可能会发现这个关于漂亮打印 JSON 数据的线程会有所帮助：

使用 React 打印漂亮的 JSON

其它你可能感兴趣的问题
上一篇React hooks：如何使用 react-hooks/exhaustive-deps 规则在没有无限循环的情况下读取和更新钩子中的状态 下一篇react中的事件冒泡不会停止使用 e.preventDefault()