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

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

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

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

JSX nation/***@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')
 );

var Avatar=React.createClass({
render:function（）{
返回(
);
}
});
var ProfilePic=React.createClass({
render:function（）{
返回(
);
}
});
var ProfileLink=React.createClass({
render:function（）{
返回(
);
}
});
反应(
,
document.getElementById（'示例'）
);

---

因此，上述代码可以嵌入到指定为jsx脚本的html标记中，也可以从外部加载。注意Avatar元素中的username prop（继承权中最顶层的react组件），问题是我们如何在另一个javasccript文件中使用不同的用户名重新命名Avatar组件？这一切都很好，如果你像这样设置它并运行。第一次加载组件时，它将pwh设置为用户名。但是，如何从javascript（即jsx脚本之外）访问此元素，并使用新的用户名值重新提交它？甚至有可能吗？

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

我建议有两种方法：

出于开发/原型的目的：也将

/**@jsx React.DOM*/

添加到普通JS文件中，并确保将此JS文件作为

type=“text/jsx”

包含在HTML页面中，以便转换器也会尝试翻译

对于要投入生产的代码，请安装jsx编译器

npm install-g react tools

，然后运行

jsx

将jsx文件转换为常规javascript

见此：

---

p、 您正在将应用程序入口点包装在DOM.ready回调或类似的回调中，对吗？

您可以粘贴一些您试图开始工作的代码吗？这个问题中没有足够的信息来回答它。请包括代码示例、如何将jsx转换为js以及页面html。很可能是打字错误或小错误。我不太确定使用该工具是否有帮助。。根据FB的说法，您只需要在投入生产环境之前进行转换。我认为react组件实际上并不意味着要在javascript文件中的jsx脚本之外进行访问。这可能违反了他们试图实现的体系结构，即单向数据流。相反，每次加载组件时，我们可能必须使用状态来传递组件生命周期方法上的数据。没有意义的是，您仍然需要在jsx脚本之外引用该组件，以便为该组件设置新状态。