我将在哪里将现有的 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 格式可能会更好，这样您就不会最终得到一个混合体