个人中心
gpt4 book ai didi

javascript - ReactJS 中未定义的组件

转载 作者：行者123 更新时间：2023-11-30 12:26:04 24 4
gpt4 key购买 nike

我正在玩 ReactJS。我定义了三个嵌套的组件:

UserProfile.jsx

var React = require('react');

var UserProfile = React.createClass({

  getInitialState: function() {
    return {
      username: "zuck"
    };
  },

  render: function() {
    return (
      <UserProfile>
        <ProfileImage username={this.props.username}/>
        <ProfileLink username={this.props.username}/>
      </UserProfile>
    );
  }

});
React.render(<UserProfile username="zuck"/>, document.body);

module.exports = UserProfile;

ProfileLink.jsx

var React = require('react');

var ProfileLink = React.createClass({

  render: function() {
    return (
      <a href="//facebook.com/{this.props.username}">{this.props.username}</a>
    );
  }

});

module.exports = ProfileLink;

ProfileImage.jsx

var React = require('react');

var ProfileImage = React.createClass({

  render: function() {
    return (
      <img src="//graph.facebook.com/{this.props.username}/picture"/>
    );
  }

});

module.exports = ProfileImage;

我的 html 文件基本上只包含三个 jsx 文件(顺便说一句，有没有办法在开发过程中将所有这些文件捆绑到一个请求中？)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React FB Link</title>
</head>
<body>
  <script type="text/javascript" src="UserProfile.jsx"></script>
  <script type="text/javascript" src="ProfileLink.jsx"></script>
  <script type="text/javascript" src="ProfileImage.jsx"></script>
</body>
</html>

我正在使用 beefy 来处理和提供 JSX 文件，使用 beefy *.jsx 8000 -- -t reactify。

生成的文件是( chop 的形式):

加载 html 页面导致错误:

Uncaught ReferenceError: ProfileImage is not defined with reference to line 15 in UserProfile.jsx:

React.createElement(ProfileImage, {username: this.props.username}),

最佳答案

您可能需要在 UserProfile.jsx 之前加载 ProfileImage.jsx 和 ProfileLink.jsx 因为现在页面正在解析 Userprofile.jsx 首先，它不知道 ProfileImage 是什么意思(因为你还没有加载它)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React FB Link</title>
</head>
<body>
  <script type="text/javascript" src="ProfileLink.jsx"></script>
  <script type="text/javascript" src="ProfileImage.jsx"></script>
  <script type="text/javascript" src="UserProfile.jsx"></script>
</body>
</html>

您可以使用任何模块 bundler 将您的文件(Browserify、Gulp、Webpack)捆绑到一个文件中作为入口点

关于javascript - ReactJS 中未定义的组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29342661/

24 4 0
文章推荐： javascript - 找不到快速路由器
文章推荐： c# - 为什么 Entity Framework ColumnBuilder 采用可为 null 的 bool 来表示可为 null 的属性？
文章推荐： ios - 如何在 swift 中添加位置图标？
文章推荐： c# - Json.NET 反序列化为带引用的动态对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com