如何从定义在和/或动态 id 元素名称的 JS 类外部渲染 ReactJS 组件？

Posted 2023-02-21

【中文标题】如何从定义在和/或动态 id 元素名称的 JS 类外部渲染 ReactJS 组件？

【英文标题】：How to render ReactJS component from outside of JS class it's defined in and/or with dynamic id element name?

【发布时间】：2014-04-02 09:12:06

【问题描述】：

如果我在说 dialog.js 中定义了一个 ReactJS 类：

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 类之后加载。我的 SPA 应用程序有一个 app.js 类，它是最后加载的。在其中，当用户单击链接时，我可能只想在那个时候呈现这个组件。我确实意识到在渲染方法中我可以以某种方式控制它是否真的被渲染..但我的想法也是除非发生动作，否则我什至不费心将它插入到 DOM 中。我猜有点像惰性插入？

我已经在我的 app.js 中尝试过：

function () 
  React.renderComponent(<Dialog/>,...);

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

那么如何在另一个函数中使用Dialog类来渲染呢？

【参考方案1】：

我认为您在这里在概念上有些错误：

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

简短的示例后跟renderComponent 调用的事实是为了展示演示的微不足道的原因。再一次记住，在 React 中，<Dialog /> 脱糖到Dialog()。如果您不调用它，则不会发生任何事情。

所以，在需要之前不要打电话。

另外，我不明白你的意思：

但显然这不起作用，因为这个 JS 不是 JSX JS 文件

既然你可以通过 JSX 处理那个文件？

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

【讨论】：

你知道吗，另一个博客上的另一篇文章基本上澄清了这一点，说你做了同样的事情。你刚才所说的问题是我试过了，但我的组件仍然没有出现。我猜我现在一定有一些代码错误。但是，是的，我没有意识到

好的！不要做 var dialog = new Dialog(); React.renderComponent(对话框,...);这是一个坏主意，因为您要参考并将其安装在多个位置。这鼓励了意想不到的突变。每当您需要时，每次都调用 Dialog()。

啊..好的..谢谢。我也在研究 Vue.js，所以现在试图在两者之间做出决定，认为两者可以很好地协同工作。

好吧 chenglou.. 我终于又开始玩这个了.. 遗憾的是它仍然无法正常工作。正如我所说，我在 dialog.js 中定义了 Dialog。我在我的 app.js 之前加载它。在 $( document ).ready(function() 我有 React.renderComponent(Dialog(), document.getElementById('react_dialog')); 中的 app.js （现在使用 jquery）中，当我重新加载我的页面时，它说 ReferenceError: Dialog not defined。然后我还在 JS 控制台窗口的下方看到了一个无效的 Object Initializer。我做得对吗？还是我还遗漏了什么？

这里有很多可能出错的地方，它可能与 React 无关。您是否尝试过查看您从 dialog.js 公开的任何内容是否在 app.'s 中可用？ （顺便说一句，加入#reactjs irc 频道会更快）