Question

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

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

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

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

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

这是一个尝试在容器中添加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格式可能会更好，因此您最终不会使用混合

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

1 个答案: