Загрузить новые рендеры jsx в существующие Div - PullRequest
Новая
       15

Загрузить новые рендеры jsx в существующие Div

1 голос
/ 12 марта 2019

Моя цель - отобразить разные страницы с разным макетом в одном элементе div на моей индексной странице.Идея состоит в том, что изменяется только один div («create-focus»), и я хочу, чтобы другие части загружались только один раз.Это доказательство концепции, поэтому все, что я создаю, является локальным (у меня нет адресов для перенаправления. Только локальные файлы для импорта.)

У меня есть index.jx как: 

<div class="col-md-12">             
    <div id="create-header"></div>
    <div id="create-top-banner"></div>              
    <div id="create-menu"></div>
    <div id="create-focus"></div>   
    <div id="create-footer"></div>
</div>

Я хотел бы заменить идентификатор "create-focus" новым html из другого jsx: 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./AdBanners.css";

class AdBanners extends Component {

  render() {
    return (        
        <div className="AdBannerBody" id="ad-banners" ref={this.myRef}>
            <h2>Stuff and Things</h2>
        </div>
    );
  }
}
export default AdBanners;

const wrapper = document.getElementById("create-adBanner");
wrapper ? ReactDOM.render(<AdBanners />, wrapper) : false;

Я попытался загрузить только html, но он просто печатает код вмой экран как текст.Мне нужно выполнить еще один вызов?Как это возможно?

Ответы [ 2 ]

0 голосов
/ 12 марта 2019

Вы неправильно используете ReactDOM.render.Второй аргумент должен быть ссылкой на обычный HTML-элемент, который вы хотите отобразить как элемент.Так что в вашем случае вы хотели бы позвонить: 

ReactDOM.render(<AdBanners />, document.getElementById("create-focus"))

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

0 голосов
/ 12 марта 2019

Я не очень хорошо понимаю, что вы пытаетесь сделать, это установить внутренний HTML-код div "create focus"?

взгляните на:

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

...