不确定如何将JSON数组映射到组件

const jsonStr = '[{"id": 1, "name": "John"}, {"id": 2, "name": "Jane"}, {"id": 3, "name": "Tom"}]';
const jsonArray = JSON.parse(jsonStr);

import React from 'react';

const Component = () => {
  const jsonArray = [{"id": 1, "name": "John"}, {"id": 2, "name": "Jane"}, {"id": 3, "name": "Tom"}];

  return (
    <div>
      {jsonArray.map(item => (
        <div key={item.id}>
          <span>ID: {item.id}</span>
          <span>Name: {item.name}</span>
        </div>
      ))}
    </div>
  );
};

<template>
  <div>
    <div v-for="item in jsonArray" :key="item.id">
      <span>ID: {{ item.id }}</span>
      <span>Name: {{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonArray: [{"id": 1, "name": "John"}, {"id": 2, "name": "Jane"}, {"id": 3, "name": "Tom"}]
    };
  }
};
</script>