Question

我正在玩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 8000 -- -t reactify来处理和提供JSX文件。

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

加载html页面会导致错误：

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

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

Answer 1

您可能需要在ProfileImage.jsx之前加载ProfileLink.jsx和UserProfile.jsx，因为此时页面首先正在解析Userprofile.jsx并且它不知道ProfileImage 1}}意思是（因为你还没有加载它）

<!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）捆绑到一个文件中作为入口点

ReactJS中未定义组件

1 个答案: