Vue js 反应 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&amp;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&amp;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&amp;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&amp;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 和 Vue 不兼容，因此转换器没有意义，或者最多生成不可读的代码，这可能无法涵盖所有边缘情况。你最好的选择是重写 react

中的逻辑

Answer 2

没有这样的事情，因为它不仅与模板有关，还与您如何编写 lifecycles/manage 您的 state/split 组件有关。如果你想使用 React，最快（也是最干净）的方法仍然是从头开始学习它。

您可以使用 this 之类的东西，但是，请确保它很快就会对您造成不良影响，尤其是如果您不使用此处的 SFC 文件。

Answer 3

没有，但是react很容易学。 React 只是 javascript 和一些想法。以及 Vue Js 和 React 之间的一些相似之处。如果你懂Vue Js，那么学起React Js就很容易了。

Vue js 反应 js

Vue js to react js

javascript

converters

reactjs

vue.js