我应该在哪里将现有的JS代码添加到react-boilerplate

Question

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

我有大量创建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
    );
  }
}

Answer 1

好的，你在你的例子中的方法是这样的：

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>
    );
  }
}

因为你必须用React返回包含在一对标签中的东西，所以通常最好只有一些默认的封闭标签(比如div)，然后把你想要渲染的所有东西都放在里面。所以，如果你想保持renderdiv()函数和原来一样，你可以这样做：

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

它会做同样的事情，除了你会有一个父div。将您的代码转换为React格式可能会更好，这样您就不会使用混合格式