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标记中呈现数据?