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 I然后将具有键值对的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.keys嵌套在一起并展平数据库结构，但我不认为这是一个非常好的解决方案，你能告诉我一个更好的方法在HTML标签内呈现我的数据吗？

Answer 1

您总是返回<div><h1></div>。如果您检测到图片或链接，请使用相应的标记image或a href

循环对象键并将标记添加到值

1 个答案: