Vue js到react js

Question

有没有一个(好的)工具可以将vue js转换成react js？首先，我是个新手，所以我现在没有时间学习vue js。如果有人有什么好的工具或小贴士给我，那就太好了。

该代码是用于创建视频显示的项目的一部分。

如果有人对我要转换成react js的代码感兴趣：

    const videos = [
  {
    id: "1",
    name: "What Happens if You Fall Into a Black Hole?",
    smallImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2015/05/InTheory_Ft_BH_1920x10801-520x293.jpg",
    largeImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2015/05/InTheory_Ft_BH_1920x10801-1720x968.jpg",
    duration: "2:18",
    active: true,
    description:
      "Filming by Petr Stepanek. Editing and motion graphics by MK12. Music by Steven Gutheinz.",
    videoURL:
      "https://www.youtube-nocookie.com/embed/ScMzIvxBSi4?rel=0&enablejsapi=1",
  },
  {
    id: "2",
    name: "A ‘Rebel’ Without a Ph.D.",
    smallImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2017/04/DysonPaintingStill-520x293.jpg",
    largeImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2017/04/DysonPaintingStill.jpg",
    duration: "2:18",
    active: false,
    videoURL:
      "https://www.youtube.com/watch?v=uleWdBDmjNg?rel=0&enablejsapi=1",
  },
  {
    id: "3",
    name: "Pencils Down: The Art of Teaching Math and Science",
    smallImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2016/10/2015-05-26-14.48.01-520x390.jpg",
    largeImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2016/10/2015-05-26-14.48.01-1720x1290.jpg",
    duration: "2:35",
    active: false,
    videoURL:
      "https://www.youtube-nocookie.com/embed/ScMzIvxBSi4?rel=0&enablejsapi=1",
  },
  {
    id: "4",
    name: "A Tenacious Explorer of Abstract Surfaces",
    smallImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2016/10/2015-05-26-14.48.01-520x390.jpg",
    largeImg:
      "https://d2r55xnwy6nx47.cloudfront.net/uploads/2016/10/2015-05-26-14.48.01-1720x1290.jpg",
    duration: "2:35",
    active: false,
    videoURL:
      "https://www.youtube.com/watch?v=uleWdBDmjNg?rel=0&enablejsapi=1",
  },
];

Vue.component("video-show-component", {
  template: `
<div>{{getActiveVideo.description}}
<div>
 <iframe
              allowFullScreen
              frameborder="0"
              height="376"
              :src="video.videoURL"
              style="width: 100%; min-width: 536px"
            />
    </div>
    </div>`,
  props: {
    video: Object,
  },
  methods: {
    setActive() {
      videos.map((video) => {
        video.active = this.video.id === video.id;
      });
    },
  },
});

Vue.component("video-list-component", {
  template: `
    <div class="video-card"
         :class="[{ 'active': video.active }]" @click="setActive(video.id)">

      <div class="video-card-thumb">
      <div class="image-container aspect-ratio-16by9">
      
        <div 
        class="image-background"
        :style="{ backgroundImage: 'url(' + video.smallImg + ')' }"
      ></div>
      <div class="image-content-container">
              <div class="video-play-icon"><img src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzIwMCcgd2lkdGg9JzIwMCcgIGZpbGw9IiM1MUE3RjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTg2LDU1LjVjLTAuNiwxLTEuNSwxLjgtMi41LDIuNEwyNi42LDg3LjljLTAuOSwwLjUtMiwwLjctMywwLjdjLTMuNiwwLTYuNC0yLjktNi40LTYuNFYxNy44ICBjMC0zLjYsMi45LTYuNCw2LjQtNi40YzEuMiwwLDIuMywwLjMsMy4zLDAuOWw1Ni45LDM0LjNDODYuOCw0OC41LDg3LjgsNTIuNCw4Niw1NS41eiI+PC9wYXRoPjwvc3ZnPg=="></div>
              </div>
      </div>
      </div>
      <div class="video-card-content">
      <div class="video-title">{{video.name}}</div>  
      <div class="video-duration">{{video.duration}}</div>
</div>
  </div>
    </div>
  `,
  props: {
    video: Object,
  },
  methods: {
    setActive() {
      videos.map((video) => {
        video.active = this.video.id === video.id;
      });
    },
  },
});

new Vue({
  el: "#app",
  data: {
    activeVideo: {},
    videos,
  },
  computed: {
    getActiveVideo() {
      return this.filterVideos();
    },
  },
  methods: {
    filterVideos() {
      return this.videos.find((video) => {
        return video.active;
      });
    },
  },
});

Answer 1

没有这样的事情，因为它不仅仅是关于模板，还有你如何组成你的生命周期/管理你的状态/拆分你的组件。如果你想使用React，最快的方法(也是最干净的)仍然是从头开始学习它。

你可以使用像this这样的东西，但要确保它很快就会影响你，特别是如果你到目前为止还没有使用SFC文件的话。

Answer 2

React和Vue具有不兼容性，因此转换器没有意义，或者最多只能生成无法读取的代码，这可能无法涵盖所有边缘情况。您最好的选择是在react中重写逻辑

Answer 3

不，但是react很容易学习。React只需要javascript和一些想法。以及Vue Js和react之间的一些相似之处。如果你了解Vue Js，那么很容易学会为你反应Js。