Details zum Schreiben von React in einem Vue-Projekt

// index.vue
<Vorlage>
  <div Klasse="Wrapper">
    <Allgemein :opt="Liste" />
  </div>
</Vorlage>
 
<script lang="ts">
importiere { Komponente, Vue } von „vue-property-decorator“;
importiere Common aus "./components/Common";

@Komponente({
  Name: "App",
  Komponenten:
    Gemeinsam,
  },
})
exportiere Standardklasse App erweitert Vue {
  private Liste = ["Ich möchte zu Taobao", "Ich möchte zu Baidu", "Ich möchte zu JD"];
}
</Skript>

importiere { CreateElement } von „vue“;
importiere { Komponente, Vue, Prop } von „vue-property-decorator“;

@Komponente({
    Name: „Allgemein“
})
exportiere Standardklasse Common erweitert Vue {
    @Prop(Objekt) opt!: beliebig[]

    render(h: ErstelleElement) {
        Rückkehr <span>
            {
                dies.opt.map((it) => {
                    geben Sie <span style="marginRight:10px">{es} zurück</span>
                })
            }
        </span>
    }
}

// Transformiere die Daten von index.vue oben

  private Liste = [
    { render: () => ["a", { style: { color: "red" } }, "Ich möchte zu Taobao"] },
    { render: () => ["a", { style: { color: "green" } }, "Ich möchte zum JD."] },
    { render: () => ["a", { style: { color: "pink" } }, "Ich möchte zu Baidu"] },
  ];

  {
                dies.opt.map((it) => {
                    return h(...it.render())
                })
            }

// TSX-Transformation <span>
            {
                dies.opt.map((it) => {
                    gib es zurück.render(h)
                })
            }
</span>


Wir können dies auf der Seite index.vue tun:
// index.vue
private Liste = [
    {
      rendern: (h: ErstelleElement) =>
        h("a", { style: { color: "red", marginRight: "5px" } }, "Ich möchte zu Taobao"),
    },
    {
      rendern: (h: ErstelleElement) =>
        h("a", { style: { color: "green", marginRight: "5px" } }, "Ich möchte zum JD"),
    },
    {
      rendern: (h: ErstelleElement) =>
        h("a", { style: { color: "pink", marginRight: "5px" } }, "Ich möchte zu Baidu"),
    },
  ];

// index.vue-Transformation {
      rendern: (h: ErstelleElement) =>
        H(
          "h1",
          {
            Stil: { Farbe: "grün", rechter Rand: "5px" },
          },
          „Ich gehe zum JD.“
        ),
    },

// index.vue
private Liste = [
   {
      rendern: (h: ErstelleElement) =>
        H(
          "A",
          {
            Stil: { Farbe: "rot", rechter Rand: "5px" },
            An: {
              klick: () => this.iWillGoWhere("TB"),
            },
          },
          „Ich möchte zu Taobao“
        ),
   }]
   
 iWillGoWhere(Typ: Zeichenfolge) {
    const goWhere: beliebig = {
      TB: () => {
        alert("Ich gehe zu Taobao!");
      },
      JD: () => {
        alert("Ich gehe zum JD!");
      },
      BD: () => {
        alert("Ich möchte zu Baidu!");
      },
    };
    geheWohin[Typ]();
  }