2016-08-25 89 views
0

我想从我的数据库使用JavaScript和JSON数据呈现HTML页面。但是,一些数据应该呈现为图像,而另一些应该呈现为链接。我如何更改或添加HTML标签?循环通过对象键并将值添加到标记

在数据库I存储内容而没有任何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" 
    } 
    } 
} 

使用阵营我然后用密钥值对的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标记中呈现数据?

回答

2

您总是会退回<div><h1></div>。 如果您检测到图片或链接,请使用相应的标签imagea href

相关问题