javascript - 如何从我的 Javascript 代码加载用 JSX 代码编写的 React 组件

Question

我是 reactjs 的新手，所以如果我不能正确地表达这个问题，请原谅。所以我有这个 jsx 脚本文件，它在加载后立即将我的 react 组件呈现到我的 View 中。最初在此脚本文件中，我的组件中没有要显示的任何数据，因此我不渲染任何子组件。然而，在稍后的某个时间点，当我从一个 Web 服务接收数据时，我非常想用该数据再次呈现组件。

我的 JSX 脚本文件中的组件没有状态，它只是应该显示我传递给它的数据。

JSX 脚本可以很好地加载并呈现组件，最初没有在 JSX 文件本身中指定任何数据。但是，当我尝试在另一个 Javascript 文件中再次呈现该组件时，它会给我一个引用错误，组件未定义。

JSX 国家/*** @jsx React.DOM */是否创建了一个完全不同的命名空间？如果是这样，我该如何访问它？使用 JSX 脚本文件外部的新数据重新渲染组件的最佳方式是什么。提前致谢! :)

/**已编辑*/伙计们，很抱歉没有添加代码..而是让我把问题简单化..如何从我的javascript文件访问我的jsx脚本中的 react 组件？

/**已编辑*/好的伙计们，这是一个代码示例:

 var Avatar = React.createClass({
 render: function() {
 return (
  <div>
    <ProfilePic username={this.props.username} />
    <ProfileLink username={this.props.username} />
  </div>
 );
 }
 });

var ProfilePic = React.createClass({
render: function() {
return (
  <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
);
}
});

var ProfileLink = React.createClass({
render: function() {
return (
  <a href={'http://www.facebook.com/' + this.props.username}>
    {this.props.username}
  </a>
);
}
});

React.render(
<Avatar username="pwh" />,
document.getElementById('example')
 );

因此，上面的代码可以嵌入到指定为 jsx 脚本的 html 标记中，也可以从外部加载。注意 Avatar 元素中的 username 属性(层次结构中最顶级的 React 组件)，问题是我们如何在另一个具有不同用户名的 javascript 文件中重新渲染 Avatar 组件？如果你像这样设置并运行，一切都很好。第一次加载组件时，它会将 pwh 设置为用户名。但是，我如何从我的 javascript(即在 jsx 脚本之外)访问此元素并使用新的用户名值重新呈现它？有可能吗？

Answer 1

我认为您在执行纯 JS 文件时遇到了问题 b/c，JSX 文件仍在由 JSXTransformer 转换，因此浏览器尚未处理。因此 JSX 文件中的符号尚未定义

我推荐两种方法:

为了开发/原型(prototype)目的:添加 /** @jsx React.DOM */也添加到纯 JS 文件，并确保将此 js 文件包含在 HTML 页面中作为 type="text/jsx"所以 Transformer 也会尝试翻译。

对于要投入生产的代码，请安装 jsx 编译器 npm install -g react-tools ，然后运行 ​​jsx <src file> <output filename>将你的 JSX 文件转换为普通的 javascript

看这个: http://facebook.github.io/react/docs/tooling-integration.html

附注您将应用程序入口点包装在 DOM.ready 回调或类似的东西中，对吗？