时间戳

首页 > 解决方案 > 将新的 jsx 渲染加载到现有的 Div

html - 将新的 jsx 渲染加载到现有的 Div

问题描述

我的目标是将具有不同布局的不同页面呈现到我的索引页面上的一个 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>

我想用另一个 jsx 的新 html 替换 id “create-focus”：

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，但它只是将代码作为文本打印到我的屏幕上。我需要运行另一个渲染调用吗？这怎么可能？

标签： htmlreactjsrenderjsx

解决方案

我不太了解您要做什么，是设置div“创建焦点”的内部html吗？

看一眼：

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

推荐阅读