时间戳

首页 > 解决方案 > 无法将反应代码链接到 html 成功

reactjs - 无法将反应代码链接到 html 成功

问题描述

我正在尝试将反应代码嵌入到我的 html 文件中，但我有一些问题。

我的代码是：

<div class="four wide column">
        <div id="Eva"></div>
        <script type="text/babel">
          import React, { Component } from "react";
          import { Card, Icon } from "semantic-ui-react";
          import EvaImage from "../src/Image/eva.png";

          var CardExampleCardProps = React.createClass({
            render: function() {
              return (
                <Card
                  image={EvaImage}
                  header="Elliot Baker"
                  meta="Friend"
                  description="Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat."
                  extra={extra}
                />
              );
            }
          });
          const EvaId = document.getElementById("Eva");
          React.render(<CardExampleCardProps />, EvaId);
        </script>
</div>

我在这里链接 CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>

浏览器控制台中没有错误。有谁知道这里发生了什么？

标签： reactjs

解决方案

未捕获的 ReferenceError：未定义要求 JSFiddle：https ://jsfiddle.net/hy3tev1c/2/

<html>
<body>
<div class="four wide column">
        <div id="Eva"></div>
        <div class="four wide column">
        <div id="Eva"></div>
        <script type="text/babel">
          import React, { Component } from "react";
          import { Card, Icon } from "semantic-ui-react";
          import EvaImage from "../src/Image/eva.png";

          var CardExampleCardProps = React.createClass({
            render: function() {
              return (
                <Card
                  image={EvaImage}
                  header="Elliot Baker"
                  meta="Friend"
                  description="Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat."
                  extra={extra}
                />
              );
            }
          });
          const EvaId = document.getElementById("Eva");
          React.render(<CardExampleCardProps />, EvaId);
        </script>
</div>
</body>
</html>

推荐阅读