React.render замените контейнер вместо вставки в

Я постепенно заменяю некоторые представления Backbone на React.

My React View:

<div id="reactViewContent">Rendered By React</div>

Мне нужно отобразить представление React под другими элементами html, не заменяя их.

<div id="somestuff">
  <div id="anotherView">Other stuff not to delete</div>
  <div id="placeholderForReactView"></div>
</div>

Мне бы хотелось, чтобы мой метод заменил местозаполнитель вместо того, чтобы вставлять его, чтобы:

React.render(React.createElement(MyTestReactView), document.getElementById('placeholderForReactView'));

может привести к:

<div id="somestuff">
  <div>Other stuff not to delete</div>
  <div id="reactViewContent">Rendered By React</div>
</div>

вместо:

<div id="somestuff">
  <div>Other stuff not to delete</div>
  <div id="placeholderForReactView">
    <div id="reactViewContent">Rendered By React</div>
  </div>
</div>

Без повторения в JQuery есть ли правильный способ сделать это?

Ответы

Ответ 1

Вам не нужен jQuery, чтобы обойти эту проблему.

Вам просто нужно отобразить во временный DIV и извлечь содержимое и заменить существующий элемент. Я добавил id="destination", чтобы элемент можно было легко извлечь из временного элемента.

var Hello = React.createClass({
    render: function() {
        return <div id="destination">Hello {this.props.name}</div>;
    }
});

// temporary render target
var temp = document.createElement("div");
// render
React.render(<Hello name="World" />, temp);
// grab the container
var container = document.getElementById("container");
// and replace the child
container.replaceChild(temp.querySelector("#destination"), document.getElementById("destination"));

Ответ 2

К сожалению, в данный момент с React нет способа сделать это. Он заменяет содержимое любого элемента, который вы вставляете.

Самое лучшее, что вы можете сделать сейчас, - это отредактировать компонент React отдельно, а затем вручную изменить DOM, чтобы получить его там, где вы хотите.

Я ожидаю, что функциональность, которую вы ищете, будет доступна в React в ближайшее время, но еще нет!

Ответ 3

Если я чего-то не хватает, вы можете просто отдать родительскому объекту node (при условии, что он имеет только один дочерний элемент, который является контейнером):

React.render(
    React.createElement(MyTestReactView),
    document.getElementById('placeholderForReactView').parentNode
);                                          // **---------^

Ответ 4

Это похоже на работу:

const linkEl = <link href="#" onclick="location.href='https://fonts.googleapis.com/css?family=Cinzel&display=swap'; return false;" rel="stylesheet"/>;
const linkElAsDirectChildOfHead = ReactDOM.createPortal(linkEl, document.head); // portal will do actual adding-to-head
ReactDOM.render(linkElAsDirectChildOfHead, document.createElement("div")); // render stub into never-added container

Результат:

Обратите внимание, что при желании он не удаляет других дочерних элементов в document.head.

Не уверен, что у этого метода есть какие-либо негативные побочные эффекты, но на первый взгляд он работает.