Question

我有一个我想要注入DOM的React组件。这是因为我的JS将由其他网站所有者通过脚本标记加载，而不是加载到我控制下的SPA中。

我想要做的是将我的Root组件添加到网页的body。

如果我做这样的事情，那么它会取代我身体的所有内容，这不是我想要的。

import React from "react";
import ReactDOM from "react-dom";

class Root extends React.Component {
  render() {
    return <div>heyyyyyyy</div>;
  }
}

if (!module.parent) {
    ReactDOM.render(<Root />, document.querySelector("body")); // <-- wrong
}

我想要像document.querySelector("body").appendChild(<Root />)这样的东西。这可能吗？

Answer 1

如果您选择单行：

ReactDOM.render(
  <Root />,
  document.body.appendChild(document.createElement("DIV"))
)

Answer 2

创建根元素并自己将其附加到DOM

＆＃13;

const rootEl = document.createElement('div')

document.body.appendChild(rootEl)


class Root extends React.Component {
  render () {
    return <div>heyyyyyyy</div>
  }
}

ReactDOM.render(
  <Root />,
  rootEl
)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div>don't replace me</div>

＆＃13;

Answer 3

我给出了扩展而复杂的答案，因为如果您需要在服务器端渲染中导入nem而不包含npm的一个/多个反应组件，这可能会有所帮助：

您可能没有NPM / Webpack，但必须使用babel：就我而言，这是服务器端渲染，这就是为什么我不能使用npm

首先：导入所有依赖项，然后将这样的主模块放入html中：

    <script type="module" src="/jsx/mainPage.js"></script>
    //specify js, not jsx because babel compiles jsx files to js

    <script>
      new mainPage({
        containerID: "${parentID}"
      })
    </script>

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
//since babel-watched is used, you dont need babel cdn lib anymore

第二：以另一种方式编写您的jsx

//my MainPage.jsx

{ ChildPageComponent } from './childPage.js';

window.MainPage = function(props) {
  ReactDOM.render(<MainPageComponent constainerID={props.containerID}/>, 
  document.getElementById(props.containerID));

}

class MainPageComponent extends React.Component { 
  render() {
    return <ChildPageComponent/>
  }
... }

我的孩子page.jsx

export class ChildPageComponent extends React.Component {
  render(){
    return(<div>helloword</div>)
  }
}

但最有帮助的是 Babel watcher 。该bash脚本有助于安装和运行babel-watcher。您必须指定源文件和已编译项目文件的路径

#!/bin/bash

if [ ! -d "node_modules" ]; then
    npm init -y
    npm install babel-cli@6 babel-preset-react-app@3
fi

SOURCES=~/Documents/yourpath/project/jsx
OUT=~/Documents/yourpath/project/jsx

npx babel --watch $SOURCES --out-dir $OUT --presets react-app/prod

确定会有所帮助，因为我一直在寻找这种方式

React：如何将React组件注入体内？

3 个答案: