Question

我确实完成了reactjs的教程，并开始制作一个将数据存储在json中的webapp。我能够从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>

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

总是欢迎批评家！

Answer 1

这是在react.js中实现的方法

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

一个解释。 Object.keys从对象中获取所有键，然后在它们上进行映射，并为每个键返回一个<span>（note the key），然后在每个跨度内通过键获取数据值

Answer 2

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

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

如果您坚决反对使用键，则可以在漂亮地打印JSON数据时发现此线程有帮助：

Pretty Printing JSON with React

Answer 3

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

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

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

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

3 个答案: