Javascript 将React组件添加/注入到来自后端的纯HTML中

我有一个来自后端的纯HTML。我想在HTML中使用特殊的

id

将React组件包括/注入/添加到

div

中，并正确地呈现它。我想我应该使用

reactlySetinerHTML

（或html react解析器）和

ReactDOM.render

，但是

ReactDOM.render

在react组件中不起作用。有没有办法做到这一点。这是我的建议，但似乎一点也不正确：

export default class MainBoard extends Component {
    constructor(props) {
    super(props);
    this.state = {content: { __html: "" }};
    };
    componentWillMount() {
    const dinamicHTML = { __html: "<div class='dinamic-content'><h4 class='content-header'>Dinamic content header</h4><div id='test-component'>This content is dynamically added.</div></div>" };
        this.setState({ content: dinamicHTML});
        ReactDOM.render(<Menu />, document.getElementById('test-component'));
    }
    render() {
        return (
            <div className="main-content-wrapper">
                <h3>MainBoard</h3>
                <div className="dinamic-content-wrapper" dangerouslySetInnerHTML={this.state.content} />
            </div>
        );
    }
}

导出默认类主板扩展组件{
建造师（道具）{
超级（道具）；
this.state={content:{uuuu html:：}}；
};
组件willmount（）{
const dinamicHTML={uuuhtml:“Dinamic内容头此内容是动态添加的。”}；
this.setState（{content:dinamicHTML}）；
render（，document.getElementById（'test-component'）；
}
render（）{
返回(
主板
);
}
}

至于试图呈现

componentWillMount

中的菜单，您几乎肯定要重新构建组件层次结构。例如：

<Container>
  <Menu />
  <MainBoard />
</Container>

---

由于

requestHTML

的实现取决于您。

使用

危险的HTML

确实是实现这一点的唯一方法

正如您所提到的，这不是一个特别好的方法，这取决于这个HTML的来源。如果用户有任何方法可以在其中插入内容，那么您很快就会遇到跨站点脚本编写的情况

---

但是如果你信任HTML，你可以直接使用你正在做的事情。

是的，这是可行的。您可以使用ReactDOM.render在html元素中插入React组件

但我会重新考虑其他方法。为什么不返回JSON而不是HTML？ 否则你会得到这个奇怪的密码

const Menu = props => <div>menu</div>;

class App extends React.Component {
  render() {
    return (
      <div className="main-content-wrapper">
        <h3>MainBoard</h3>
        <div ref={el => (this.dynamicContentWrapper = el)} 
          className="dynamic-content-wrapper" />
      </div>
    );
  }

  componentDidMount(){
    const htmlFromAjax = `
      <div class='dynamic-content'>
        <h4 class='content-header'>Dynamic content header</h4>
        <div id='test-component'>This content is dynamically added.</div>
      </div>`;
    this.dynamicContentWrapper.innerHTML = htmlFromAjax;
    ReactDOM.render(<Menu />, this.dynamicContentWrapper.querySelector('#test-component'));
  }
}

const Menu=props=>Menu；
类应用程序扩展了React.Component{
render（）{
返回(
主板
（this.dynamicContentWrapper=el）}
className=“动态内容包装器”/>
);
}
componentDidMount（）{
常量htmlFromAjax=`
动态内容头
此内容是动态添加的。
`;
this.dynamicContentWrapper.innerHTML=htmlFromAjax；
ReactDOM.render（，this.dynamicContentRapper.querySelector（“#测试组件”）；
}
}

在服务器中呈现react组件，请参阅下一篇js。我真的不明白这对我来说是如何工作的。也许我对next.js不够熟悉。你能给我解释一下吗。谢谢，谢谢，但这还不能回答主要问题。如何在来自服务器的纯HTML中注入React组件（例如菜单）。我想您需要的是

renderToString

来自

react-dom/server

。这里有一个例子，我解释得不对。我不想仅仅将一些组件添加为字符串或其他内容。我收到一个纯HTML，如

我应该在这个

div

中插入一些组件。THML可能非常大。我已经更新了链接的要点。让我知道这是否回答了您的问题，我将编辑我的主要答案以包含它。我测试了它，但最终它呈现的是

[object htmldevelment]

，而不是HTML

const Menu = props => <div>menu</div>;

class App extends React.Component {
  render() {
    return (
      <div className="main-content-wrapper">
        <h3>MainBoard</h3>
        <div ref={el => (this.dynamicContentWrapper = el)} 
          className="dynamic-content-wrapper" />
      </div>
    );
  }

  componentDidMount(){
    const htmlFromAjax = `
      <div class='dynamic-content'>
        <h4 class='content-header'>Dynamic content header</h4>
        <div id='test-component'>This content is dynamically added.</div>
      </div>`;
    this.dynamicContentWrapper.innerHTML = htmlFromAjax;
    ReactDOM.render(<Menu />, this.dynamicContentWrapper.querySelector('#test-component'));
  }
}