jsx创建的节点能否转为dom原生elementNode

问题描述

问 题

就是需要用js创建DOM元素节点，然后通过appendChild()这些方法，将元素节点插到DOM中，但是js原生的方法创建大量DOM节点和class属性很不方便，如果用jsx创建了之后，能否将jsx创建的节点转为普通的DOM元素节点，通过appendChild()进行插入？

解决方案

可以这样写，不过感觉是多此一举

function getNode(Comp) {
  return (
    <div ref={c => { Comp.refNode = c; }}>node</div>
  );
}

class App extends React.PureComponent {
  componentDidMount() {
    ReactDOM.findDOMNode(this.refNodeWrapper).append(this.refNode);
  }
  
  render() {
    return (
      <div>
        hello world
        <div ref={c => { this.refNodeWrapper = c; }}></div>
        <div
          style={{
            display: 'none'
          }}
        >
          {
            getNode(this)
          }
        </div>
      </div>
    );
  }
}

这篇关于jsx创建的节点能否转为dom原生elementNode的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！