javascript - 循环遍历对象键并向值添加标签

Question

我正在尝试使用 JavaScript 和 JSON 数据从我的数据库呈现 HTML 页面。但是，某些数据应呈现为图像，而其他数据应呈现为链接。如何更改或添加 HTML 标签？

在数据库中，我存储的内容没有任何 HTML 属性:

{
  "projects" : {
    "one" : {
      "a" : "E-Network",
      "b" : "/images/projects/unfccc/logo.gif",
      "c" : "/unfccc",
      "d" : "The E-Network"
    },
    "two" : {
      "a" : "User Experience Design",
      "b" : "/images/projects/rex/logo.gif",
      "c" : "/rex",
      "d" : "Rejseplanen Experience"
    }
  }
}

然后，我使用 React 将带有键值对的对象传递给消息组件。然后，我在回调方法中使用 Object.keys 在各个标记内呈现 project.one 的内容:

class Message extends React.Component {
   render(){

     function mapObject(object, callback) {
      return Object.keys(object).map(function (key) {
        return callback(key, object[key]);
      });
    }

    return (
      <div>
       {mapObject (this.props.data.one, function(key, value) {
         return <h1 key={key}>{value}</h1>
       })}
      </div>
      )
   }
}
export default Message;

输出:

但是我如何控制每个键值对渲染的标签？我看到的唯一解决方案是将四个 Object.key 相互嵌套并扁平化数据库结构，但我认为这不是一个很好的解决方案，您能告诉我一种在 HTML 标记内呈现数据的更好方法吗？

Answer 1

您总是返回 <div><h1></div> 。如果您检测到图像或链接，请使用适当的标签 image或a href