Question

更新3

我已经使用AngularJs好几年了，想尝试一下ReactJs。使用AngularJs，我可以定义一个指令并将该节点放在HTML DOM中，如下所示：

<!DOCTYPE html>
<html>
  <head>
....
  </head>
  <body>
    <!--helloWorld is a directive-->
    <hello-world></hello-world>
  </body>
</html>

但是，据我所知，在React中，需要调用

React.render(
  <HelloWorld />,
  targetElement);

挂载{{1}}。 React中有没有办法自动挂载组件？

我创建了一个codepen here来展示我的想法作为一个实验。主要代码如下：

component

每隔50ms，我们将检查是否已创建类。如果是，我将它呈现在真实DOM节点function R() { var className = 'Hello'; if (window[className]) { var elements = document.getElementsByTagName(className); angular.forEach(elements, function (element) { React.render(React.createElement(window[className]), element); }); } setTimeout(R, 50); }中的元素下。

*警告：此代码仅适用于琐碎的情况。

创建反应类的JSX代码：

<Hello> </Hello>

在html中：

<script type="text/jsx">
  var Hello = React.createClass({
    render: function() {
      return <h1>Hello</h1>;
    }
  });
  // React.render could be called here, like below:
  React.render(
    <Hello> </Hello>,
    document.getElementById('example')
  );
  // but I want the <Hello> </Hello> stays in the html DOM. So that I don't
  // repeat calling React.render. The first piece of code, will find the
  // node and render the ReactClass there.
</script>

我不想使用<Hello> </Hello>，但不知道是否有其他方法。

Answer 1

我真的不明白你要做什么，但你可以使用EventEmitter 在创建类时绑定侦听器。

var EventEmitter = require('events').EventEmitter; 
var assign = require('object-assign');

var myclassfactory= assign({}, EventEmitter.prototype, {
    addListener: function(myclassName,callback) {
        this.on(myclass,callback);
    },

    createClass: function(myclassName) {
      //create your class ===>>>>>> React.CreateClass !!
      this.emit(myclassName);
    }

});

然后在视图中添加一个监听器：

 myclassfactory.addListener(myclassName, render(myclassName));
 var render = function(myclassName) {
        React.render(myclassName, myelement);
 }

我可以自动安装React组件（如angularjs＆＃39; direct）？

更新3

1 个答案: