html-to-react, 将原始HTML转换为响应DOM结构的轻量库

分享于 

5分钟阅读

GitHub

  繁體 雙語
A lightweight library that converts raw HTML to a React DOM structure.
  • 源代码名称:html-to-react
  • 源代码网址:http://www.github.com/mikenikles/html-to-react
  • html-to-react源代码文档
  • html-to-react源代码下载
  • Git URL:
    git://www.github.com/mikenikles/html-to-react.git
    Git Clone代码到本地:
    git clone http://www.github.com/mikenikles/html-to-react
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/mikenikles/html-to-react
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    html-to-react Build Statusnpm versionDependency StatusCoverage Status

    将原始HTML转换为响应DOM结构的轻量库。

    项目已经移动

    作为 #43 插件的一部分,该项目移到了 https://github.com/aknuds1/html-to-react。 请在新位置提交任何问题或者文件。

    为什么?

    我有一个场景,它的中一个HTML模板由不同的团队生成,但我想利用对我控制的部分的React。 模板基本上包含如下内容:

    
    <div class="row">
    
    
     <div class="col-sm-6">
    
    
     <div data-report-id="report-1">
    
    
     <!-- A React component for report-1 -->
    
    
     </div>
    
    
     </div>
    
    
     <div class="col-sm-6">
    
    
     <div data-report-id="report-2">
    
    
     <!-- A React component for report-2 -->
    
    
     </div>
    
    
     </div>
    
    
    </div>
    
    
    
    

    我必须将包含一个 data-report-id 属性的每个 <div> 都替换为一个实际报告,这只是一个React。

    简单地替换带有React组件的<div> 元素会带来多个顶级的React组件,没有共同父元素。

    通过解析每个DOM元素并将它的转换为单个父元素的React树,英镑模块可以解决这个问题。

    安装

    $ npm install --save html-to-react

    示例

    简单

    下面的示例解析每个 node 及其属性,并返回响应组件的树。

    var React =require('react');var HtmlToReact =newrequire('html-to-react');var htmlInput ='<div><h1>Title</h1><p>A paragraph</p></div>';var htmlToReactParser =newHtmlToReact.Parser(React);var reactComponent =htmlToReactParser.parse(htmlInput);var reactHtml =React.renderToStaticMarkup(reactComponent);assert.equal(reactHtml, htmlInput); // true

    具有自定义处理指令

    如果某些DOM节点需要特定的处理,例如如果你想为每个 <h1> 标记大写,下面的示例将演示:

    var React =require('react');var HtmlToReact =newrequire('html-to-react');var htmlInput ='<div><h1>Title</h1><p>Paragraph</p><h1>Another title</h1></div>';var htmlExpected ='<div><h1>TITLE</h1><p>Paragraph</p><h1>ANOTHER TITLE</h1></div>';varisValidNode=function() {
     returntrue;
    };// Order matters. Instructions are processed in the order they're definedvar processNodeDefinitions =newHtmlToReact.ProcessNodeDefinitions(React);var processingInstructions = [
     {
     // Custom <h1> processingshouldProcessNode:function(node) {
     returnnode.parent&&node.parent.name&&node.parent.name==='h1';
     },
     processNode:function(node, children) {
     returnnode.data.toUpperCase();
     }
     }, {
     // Anything elseshouldProcessNode:function(node) {
     returntrue;
     },
     processNode:processNodeDefinitions.processDefaultNode }];var htmlToReactParser =newHtmlToReact.Parser(React);var reactComponent =htmlToReactParser.parseWithInstructions(htmlInput, isValidNode, processingInstructions);var reactHtml =React.renderToStaticMarkup(reactComponent);assert.equal(reactHtml, htmlExpected);

    测试&覆盖率

    $ npm run test-locally

    $ npm run test-html-coverage


    str  Light  react  DOM  Struct  结构