javascript - 在将ReactJS组件放入DOM中之前，先在内存中渲染它

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

磁贴是动态加载的。然后可以使用init方法针对DOM元素对它们进行初始化，而图块将负责呈现自身。

功能/my-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的新手，所以我可能完全误会了一些东西。

最佳答案

您应该能够利用React.createElement在内存中创建元素，然后利用ReactDOM.render()将该元素插入DOM。

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

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

但是，createElement不会返回本机DOM元素，而是ReactElement的实例。不确定是否适合您的需求。

关于javascript - 在将ReactJS组件放入DOM中之前，先在内存中渲染它，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40161825/