Javascript 我应该在哪里添加现有的JS代码来反应样板文件

我花了一段时间玩弄，阅读文档，搜索网页等。我建立了一些简单的组件和容器，没有问题

我有大量创建DOM节点并使用javascript返回它们的代码。举个简单的例子

  function makeSomething(){    
        let div = document.createElement('div');
        div.innerHTML = 'where would this go in reactjs boilerplate';
        return div
  }

我的代码执行大量DOM操作，包括添加表行、删除行和列、移动行、从远程源获取数据。除了使用jquery的ajax调用之外，它都是用javascript编写的

我的问题是如何调用并将返回的节点放入容器中

以下是尝试在容器中添加js创建的节点的简化示例：

export default class VendorsPage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  // Since state and props are static,
  // there's no need to re-render this component
  shouldComponentUpdate() {
    return false;
  }
  renderdiv(){
    let div = document.createElement('div');
    div.innerHTML = 'hi there'
      return div
  }
  render() {
    return (
        //how do I put renderdiv in here
    );
  }
}

---

在你的例子中，你是这样做的：

export default class VendorsPage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  // Since state and props are static,
  // there's no need to re-render this component
  shouldComponentUpdate() {
    return false;
  }
  renderdiv(){
    return 'hi there';
  }
  render() {
    return (
      <div>{this.renderdiv()}</div>
    );
  }
}

export default class VendorsPage扩展React.Component{//eslint禁用line React/prefere无状态函数
//因为状态和道具是静态的，
//无需重新渲染此组件
shouldComponentUpdate（）{
返回false；
}
renderdiv（）{
返回“你好”；
}
render（）{
返回(
{this.renderdiv（）}
);
}
}

由于必须使用React返回包含在一对标记中的内容，因此通常最好只使用一些默认的封闭标记（如div），然后将需要渲染的所有内容都放在其中。因此，如果您想保持renderdiv（）函数与原来的相同，可以这样做：

  renderdiv(){
    div = document.createElement('div');
    div.innerHTML = 'hi there'
      return div
  }
  render() {
    return (
        <div>{this.renderdiv()}</div>
    );
  }

renderdiv（）{
div=document.createElement（'div'）；
div.innerHTML='hi there'
返回分区
}
render（）{
返回(
{this.renderdiv（）}
);
}

---

它也会做同样的事情，除了你有一个父div。最好将代码转换为React格式，这样你就不会得到一个混合的

第一个例子很好，第二个例子抛出了一个错误，我还没有找到如何修复的方法：如果你想呈现一个子集合，改为使用数组，或使用React附加组件中的createFragment（对象）包装对象。我要渲染的DOM节点来自数千行代码。我希望按原样使用该代码，并将页面的其余部分包装起来。我想这可能是不可能的啊，只是运行了它，得到了同样的错误。原因是javascript中的操作方式（即div=document.createElement（'div'）；）不会创建React元素对象。它只是创建了一个无法渲染的普通元素。我在谷歌上快速搜索了一下，似乎找不到一种直接从一个转换到另一个的方法。您可能需要对原始代码进行一些编辑，以使其与React兼容：(