Question

我的目标是在索引页面上将具有不同布局的不同页面呈现到一个div。这个想法是只有一个div（“创建焦点”）发生变化，而我希望其他部分只需加载一次。这是一个概念证明，因此我正在构建的所有内容都是本地的（我没有地址可以重定向到。只能导入本地文件。）

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

Answer 1

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

看看：

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

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

1 个答案: