Блог

У меня есть концепция плитки в моем приложении.

Плитки загружаются динамически. Затем они могут быть инициализированы для элемента DOM с помощью init метода, при этом плитка сама позаботится о рендеринге.

features/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 , который выводит содержимое плитки на экран.

features/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. Не уверен, соответствует ли это вашим потребностям.

Это кажется довольно сложным способом выполнения чего-либо в AngularJS, может быть, вам следует пересмотреть свой дизайн?

В React все еще хуже, вы собираетесь обойти ReactDOM и вставить его вручную?

Я бы рекомендовал, по крайней мере, ознакомиться с руководством по React, прежде чем пытаться это сделать.