Question

我是ReactJs的新手。从示例中，我可以看到需要调用 React.render(elementToBeReadered, targetingElement)。有没有办法直接使用React中定义的Web组件，比如angularjs＆＃39;指示？ E.g。

<Hello />

var Hello = React.createClass({
  render: function() {
  return (
    <div>
      Hello World!
    </div>
    );
  }
});

因此，我不需要添加<div id='target-element'></div>之类的目标元素，然后使用React.render(<Hello />, document.getElementById('target-element'))进行渲染。我为什么要在任何地方复制这个？

Answer 1

您通常会将反应组件嵌套在一起。在角度中，这类似于在许多不同元素上具有许多ng-app。

如果你想拥有常规DOM，只有稀疏地填充了反应组件，那么你必须按照你所说的那样通过元素引用进行渲染。我会尝试使用react组件来组成整个应用程序。

Answer 2

有没有办法直接使用React中定义的Web组件，比如angularjs＆＃39;指令？

当然，您可以在React.render之上构建您喜欢的任何系统。你给它一个react元素和一个dom节点，它就是它的功能。您可以构建一个角度指令来呈现您喜欢的组件，例如：

var reactComponents = {Foo: Foo};
module.directive('react', function($parse){
  return {
    link: function(scope, element, attrs){
      var props = Object.keys(attrs).reduce(function(props, key){
        if (key === "component") return props;
        props[key] = $parse(attrs[key])(scope);
        return props;
      }, {});
      var reactElement = React.createElement(reactComponents[attrs.component], props);
      React.render(reactElement, element);
    }
  };
});

^{未经过测试}

在你的模板中：

<react component="Foo" bar="1" baz="something.otherThing"></react>

如果添加一些观察者，它会响应表达式更改，并且您可以执行其他操作，例如错误处理，使用$ injector解析组件类而不是静态对象哈希，以及处理＆＃39; $ destroy＆＃39; （请参阅React.unmountComponentAtNode）。

还有另一种在ReactJs中呈现的方法

2 个答案: