Question

我的应用程序中有一个tile的概念。

Tiles是动态加载的。然后可以使用init方法针对DOM元素初始化它们，并使用tile来渲染自身。

功能/我的瓦片/ tile.js

import contentsComponentFactory from './components/contents/factory'

const tile = {
  init,
};

// `el` is a DOM element
function init(el) {
  // Render a "contents" ReactJS component (see below) to the DOM - how?
  // Is the following possible?
  el.appendChild(contentsComponentFactory.create({ props }).render());
}

export default tile;

图块有一个组件contents，可将图块内容呈现给屏幕。

功能/ my-tile / components / contents / factory.js

const factory = {
  create
};

function create(options) {
  const component = Object.create(React.Component.prototype);

  component.props = options.props;
  component.state = { message: 'This is a tile' };
  component.render = function() {
    return <div>{this.state.message}</div>;
  };

  return component;
}

export default factory;

在AngularJS中，init我会在内存中呈现内容并将结果插入到DOM中。我可以在ReactJS中这样做吗？

我是ReactJS的新手，所以我可能完全误解了一些东西。

Answer 1

You should be able to utilize React.createElement to create the element in memory, and then ReactDOM.render() in order to insert it into the DOM.

const element = React.createElement('div', null, 'Hello, World!');
ReactDOM.render(element, document.getElementById('content'));

http://codepen.io/mikechabot/pen/PGXwxa?editors=1010

However, createElement doesn't return a native DOM element, but rather an instance of ReactElement. Not sure if this suits your needs.

Answer 2

这似乎是一个非常复杂的方式来处理AngularJS，也许你应该重新考虑你的设计？

在React中更糟糕的是，你打算绕过ReactDOM并手动插入它吗？

我建议您在尝试之前至少阅读React教程。

在将ReactJS组件放入DOM之前，在内存中呈现ReactJS组件

2 个答案: