遍历对象键并将标签添加到值

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传递给消息组件。 然后，我在回调方法中使用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