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

Question

I am trying to render an HTML page from my database using JavaScript and JSON data. However, some of the data should be rendered as images while others should be rendered as links. How can I change or add HTML tags?

In the database I store the content without any HTML attributes:

{
  "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"
    }
  }
}

Using React I then pass down an Object with key value pairs to a message component. Then I render the contents of project.one inside individual tags using Object.keys in a callback method:

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;

which outputs:

But how can I control what tag each key value pair is rendered with? The only solution I see is nesting four Object.keys inside each other and flattening the database structure, but I don't think this is a very good solution, can you tell me a better way to render my data inside HTML tags?

Answer 1

You are always returning a <div><h1></div> . If you detect an image or link use the appropriate tag image or a href