0
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"
}
}
}
を使用し、私は、メッセージコンポーネントにキーと値のペアを持つオブジェクトをダウン渡す反応します。
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を使用して個々のタグ内部project.oneの内容をレンダリング
しかし、どのように私は、各キーと値のペアがでレンダリングされたものをタグ制御することができますか？私が見る唯一の解決策は、4つのObject.keysを互いに入れ子にし、データベース構造を平坦化することですが、これは非常に良い解決策ではないと思います。HTMLタグ内でデータをレンダリングするより良い方法を教えてください。