如何从JS类的外部呈现ReactJS组件它是在和/或使用动态id元素名称定义的?

How to render ReactJS component from outside of JS class it#39;s defined in and/or with dynamic id element name?(如何从JS类的外部呈现ReactJS组件它是在和/或使用动态id元素名称定义的?)

本文介绍了如何从JS类的外部呈现ReactJS组件它是在和/或使用动态id元素名称定义的?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果我定义了一个ReactJS类,比如Dialog.js:

var divStyle = {
  padding: '15px',
  paddingBottom: '12px'
};

var Dialog = React.createClass({
 render: function() {
    return (
      <div style={divStyle}>...</div>
    );
  }
});
在上面的内容中,我定义了一个类。但在我看到的每个例子中都有React.renderComponent(<Dialog/>,document.getElementById('someId'));

我对此的问题是..如果我想在具有不同ID的不同页面上使用该组件来呈现它,或者可能用于几个不同的ID,我不能在它所在的实际类中硬编码该ID。我想我可以通过某种方式传入ID??

而且,我还希望能够在不同的JS类中呈现组件,该JS类是在加载此js类之后加载的。我的SPA应用程序有一个app.js类,它是最后加载的。在它中,当用户点击一个链接时,我可能只想在那个时候呈现这个组件。我确实意识到,在Render方法中,我可以以某种方式控制它是否被实际呈现。但我的想法也是,除非发生操作,否则甚至不麻烦将其插入到DOM中。我猜有点像懒惰的插入法?

我已经在我的app.js中尝试了:

function () {
  React.renderComponent(<Dialog/>,...);
}
但显然这不起作用,因为该JS不是JSX JS文件。所以我尝试使用React.renderComponent(Dialog,...);认为Dialog类是全局定义的,所以它应该是可用的,但也失败了。

那么如何在另一个函数中使用Dialog类来呈现它?

推荐答案

我认为您在概念上搞错了:

但在我看到的每个例子中都有React.renderComponent(<Dialog/>,document.getElementById('someId'));

简短的示例后面是一个renderComponent调用,这是为了显示演示的简单原因。请再次记住,在Reaction中,<Dialog />脱糖为Dialog()。如果你不称之为它,什么都不会发生。

所以,除非你需要,否则不要打电话。

还有,我不明白你说的是什么意思:

但这显然不起作用,因为该JS不是JSX JS文件

因为您只能通过JSX处理该文件?

如果您在将JSX映射到函数时遇到困难,反之亦然:请在此处尝试实时编译器:http://facebook.github.io/react/jsx-compiler.html

这篇关于如何从JS类的外部呈现ReactJS组件它是在和/或使用动态id元素名称定义的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何从JS类的外部呈现ReactJS组件它是在和/或使用动态id元素名称定义的?

基础教程推荐