【问题标题】:how to render sucessfully html code inside reacjs如何在react js中成功渲染html代码
【发布时间】:2020-07-25 17:37:37
【问题描述】:

我正在尝试开发一个 ReactJs 应用程序.....该应用程序是一个基于 AR 的网络应用程序......我被困在一个位置,我无法在 ReactJS 中渲染 HTML 我想知道如何渲染它ReactJs 中的 HTML 文件......每次当我使用不同的方法运行此代码时,它都会生成随机错误。下面是我想在 ReactJS 中呈现的 HTML 代码
.

<Html>
    <Head><title>Test</title></Head>
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin : 0px; overflow: hidden;">
  <!-- minimal loader shown until image descriptors are loaded -->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  
    <a-nft
      type="nft"
      url="https://scx2.b-cdn.net/gfx/news/2019/1-galaxygather.jpg"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
   
      <a-entity
        gltf-model="https://artest-5b194.web.app/scene.gltf"
        scale="1 1 1"
        position="0 0 0"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</Html> 

【问题讨论】:

  • 这看起来不像 ReactJs
  • 这不是 react js 代码这是我要在 react 中渲染的 HTML 代码

标签: javascript html node.js reactjs render


【解决方案1】:

您可以使用dangerouslySetInnerHTML

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-08-18
    • 2018-10-02
    • 1970-01-01
    • 2021-05-29
    • 1970-01-01
    • 2021-11-29
    • 1970-01-01
    • 2021-07-09
    相关资源
    最近更新 更多