除了dangerouslySetInnerHTML我们还能怎么办？

使用react开发前端项目，我们常会遇到需要在一个dom里直接筛入一段纯html(后端给的)的需求，比如我们的编辑器，文章的初始内容是一段通过ajax获取的html。当然这么一个常见的需求，react当然帮你想好了解决方案，那就是dangerouslySetInnerHTML，但是就是使用上有点丑陋，需要这样写dangerouslySetInnerHTML={{ __html: content }}。

dangerouslySetInnerHTML有时候也会显得有点捉襟，我们看这样一个需求：我不但需要直接在dom里插入纯html，我在插入前需要对这段html的元素做些处理，比如需要在每一个元素里再插入一个元素，或者需要给里面的元素绑定事件。
这种需求用dangerouslySetInnerHTML来实现的话，我们就需要在插入html前对html手动处理下，写一个原生的方法，遍历每一个元素并插入我们需要的元素，最后返回一段处理好的新的html，然后每一次变化都重新处理重新设置和更新整块html，这样的弊端有两个：

1. 就是对于一个需求我需要实现一个处理dom的工具方法，n个需求我可能需要实现n方法。
2. 没有利用到react的局部更新的优势，每次都是整块更新。

对于需要绑定事件的需求来说，dangerouslySetInnerHTML方式就显得更加拙劣了。首先我们在 componentDidMount时候，使用findDomNode的方式给指定dom绑定原生事件，或者通过事件代理的方式，给父元素绑定事件，通过target来识别指定元素。这还是在使用react么？这样弊端也很明显：

1. 原生事件机制与react事件机制混用，不易维护、把握不好容易出岔子。
2. 通过target绑定，有时候并不是这么好判定。

我们使用react的话，肯定是希望：1. 尽量少些原生代码（写的话也应该是写个工具或者lib之类的），2. 充分利用react的优势，3. dom和事件都交给react来管理，不需要另搞一套。

所以我们当时就在想，如果想要实现需求，又不另外搞一套，那就需要把html转成react element，最后通过jsx语法渲染出来，这样就完全融入到你react整个框架中，很清爽，也很灵活啊。

后来我发现早有高人写好了这样的库，让html直接主换成react element（component），比如htmr这个库。其实这样的库实现也很简单，就是利用React.createElement方法把一个个的dom转成了react element。

这里贴一下怎么使用这个库吧

import convert from 'htmr';

render() {
    return (
      // react一样可以玩dom啊
      convert(html).map((reactElement, k) => {
        // 不需要处理的元素就可以直接返回
        if (element.type === 'hr') {
          return element;
        }
        // 需要处理的元素，通过jsx语法展开渲染，方便添加事件和子元素
        return (
                <element.type {...element.props}
                  key={k}
                >
                  {element.props.children}
                  {/* 以下就是 新增加的子元素，并给他绑定了事件  */}
                  <span className={maskItemClass}
                    onClick={this.onMaskItemClickReact}
                    data-index={k}
                  >
                    <em></em>
                  </span>
                </element.type>
              );
      })
    );
}

这样使用后就完全不需要写额外的原生代码，整个dom和事件都交给了react，处理上要灵活许多哈。

标题问的还能怎么办？其实可以总结一句话：我们还能把html转成react element并用jsx语法渲染。