Могу ли я преобразовать этот Vue код в реагирующий код, этот vue код использует рекурсивный компонент

Question

Vue.component('genre', {
  template: '#genre-template',
  props: ['details'],
  data() {
    return {
      newName: ''
    }
  },
  methods: {
    addTitle() {
      // start off the emit chain with the action and newName 
      this.emitEvent(['addTitle', this.newName])
    },
    deleteTitle(title) {
      this.emitEvent(['deleteTitle', title])
    },
    addGenre() {
      // start off the emit chain with the action and newName 
      this.emitEvent(['addGenre', this.newName])
    },
    deleteGenre(name) {
      this.emitEvent(['deleteGenre', name])
    },
    emitEvent(payload) {
      // Pass any event we receive up with our name at the front
      this.$emit('event', [this.details.name].concat(payload))
    }
  }
})

new Vue({
  el: "#app",
  methods: {
    handleEvent(payload) {
      let newGenres = []
      for (let genre of this.genres) {
        let result = this.handleEventHelper(payload, genre)
        if (result) newGenres.push(result)
      }
      this.genres = newGenres
    },
    handleEventHelper(breadCrumbs, genre) {
      let thisCrumb = breadCrumbs[0]

      // base case: if we don't need to go down this path just return
      if (thisCrumb !== genre.name) {
        return genre
      }

      let nextCrumb = breadCrumbs[1]
      let name = breadCrumbs[2]

      switch(nextCrumb) {
        case 'addTitle':
          genre.titles = this.addTitle(genre, name)
          break
        case 'deleteTitle': 
          genre.titles = this.deleteTitle(genre, name)
          break
        case 'addGenre':
          genre.subgenres = this.addGenre(genre, name)
          break
        case 'deleteGenre':
          // fail to return this genre and it will be effectively deleted
          return
        default: 
          // general case - recurse if there's more tree left
          if (genre.subgenres) {
            let returnedGenres = []
            for (let subgenre of genre.subgenres) {
              let result = this.handleEventHelper(breadCrumbs.slice(1), subgenre)
              if (result) returnedGenres.push(result)
            }
            genre.subgenres = returnedGenres
          }
          break
      }

      // pass results back up
      return genre
    },
    addTitle(genre, title) {
      let titles = genre.titles
      titles.push({name: title})
      return titles
    },
    deleteTitle(genre, title) {
      let titles = genre.titles
      return titles.filter((item) => {
        return item.name !== title
      })
    },
    addGenre(genre, subgenre) {
      let genres = genre.subgenres
      genres.push({name: subgenre, titles: [], subgenres: []})
      return genres
    },
  },
  data: {
    title: "Genres",
    genres: [
      {
        name: 'Fiction',
        titles: [],
        subgenres: [
          { 
            name: 'Science Fiction',
            titles: [],
            subgenres: [
              { 
                name: 'Hard Sci-fi', 
                titles: [
                  { 
                    name: 'Red Mars'
                  }
                ],
                subgenres: []
              },
              { 
                name: 'Space Opera',
                titles: [
                  { 
                    name: 'Consider Phlebas'
                  }
                ],
                subgenres: []
              }
            ]
          },
          { name: 'Historical Fiction', titles: [], subgenres: [] },
          { name: 'Mystery', titles: [], subgenres: [] }
        ]
      }, 
      {
        name: 'Non-fiction',
        titles: [],
        subgenres: [
          { name: 'Biographies', 
            titles: [],
            subgenres: [
              { name: 'Autobiographies' }
            ]
          },
          { name: 'Research Papers', titles: [], subgenres: [] },
          { name: 'Textbooks', titles: [], subgenres: [] }
        ]
      }
    ]
  }
});

По сути, он имеет рекурсивный компонент, который я хочу сделать в reactjs Так что, если любая помощь возможна, потому что я хочу сделать рекурсивный компонент в реакции, который имеет рекурсивный компонент и с бесконечным уровнем иерархии не совсем бесконечный, но пользовательский зависит бесконечно, как в приведенном выше коде. Вот код DEMO приведенного выше по этой ссылке. https://codeburst.io/recursive-components-2de24459d98 См. example3 Это ссылка на описание того, что он делает.