ReactJS中未定义组件

Component undefined in ReactJS

本文关键字：组件 未定义 ReactJS      更新时间：2023-09-26

我在玩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>

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

生成的文件是（以截断的形式）：

  • 用户配置文件.jsx
  • ProfileLink.jsx
  • 个人资料图片.jsx

加载html页面导致错误：

未捕获的ReferenceError:未定义ProfileImage参照UserProfile.jsx:中的第15行

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>

您可以使用任何模块捆绑器将您的文件（Browserify、Gulp、Webpack）捆绑到一个单独的文件中作为入口点

相关文章：