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

问题描述

如果我定义了一个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元素名称定义的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！