html-to-react

快速的HTML到React JSX转换器

入门

此项目将HTML转换为有效的React JSX标记。

这有助于在使用查找和替换工具时，当你抓取内容并获得原始HTML，需要将其转换回在有效React代码库中的形式时。

[dependencies]
html_to_react = "0.5.1"

extern crate html_to_react;
use html_to_react::convert_props_react;

fn main(){
    let html = r#"<div class="something" for="mystuff" tabindex="2" style="color: white; background-color: black">"#;
    let react_html = convert_props_react(html.to_string());

    println!("{}", react_html);
    // <div className="something" htmlFor="mystuff" tabIndex="2" style={{color: "white", backgroundColor: "black"}}>
}

extern crate html_to_react;
use html_to_react::convert_to_react;

/// convert html to react component
fn main(){
    let html = r#"<div class="something" for="mystuff" tabindex="2" style="color: white; background-color: black">"#;
    let react_component = convert_to_react(html.to_string(), "Something");

    println!("{}", react_component);
    // import React from "react"
    //
    // function Something() {
    //     return (
    //         <div className="something" htmlFor="mystuff" tabIndex="2" style={{color: "white", backgroundColor: "black"}}>
    //             <div className="child" htmlFor="mychildstuff" tabIndex="2" style={{color: "white", backgroundColor: "black"}}>
    //                 child
    //             </div>
    //         </div>
    //     )
    // }
}

关于

此项目使用BTrees，并在查找前按顺序解析HTML以提高速度。

您可以与此项目结合使用 html-parser 将元素转换为React准备好的组件。

这是一个 示例，展示了如何使用 ripgrep 从抓取的内容中执行搜索和替换，以找到代码库中正确的位置，使用React的方式进行。

许可证

MIT