使用靜態HTML和React

Question

我正在學習如何使用React，到目前為止，我非常喜歡它。 但是，我遇到了一些問題。

作為React的練習，我正在嘗試構建一個導航菜單，根據活動項目或選項卡顯示不同的內容。 就我的目的而言，這些不同的觀點本質上是靜態的，主要是對一些嵌入式音頻或視頻提供信息。 但每個視圖中可能有很多內容。 對我來說，最有意義的是創建單獨的HTML文件並在這些不同的視圖中使用它們的內容。 但是，我可以看到在不使用外部庫的情況下執行此操作的唯一方法是將每個視圖的靜態內容放在其自己的React組件中，該組件除了呈現靜態內容之外什么都不做。

這對我來說似乎很愚蠢。 有沒有辦法完成我在React嘗試做的事情？ 如果沒有，是否有一個輕量級或廣泛使用的庫，這將允許我完成這個？ 提前致謝！

Answer 1

如果您想在頁面加載時加載所有html，則應在構建過程或服務器中動態創建腳本：

var PAGE_HTML={"page1.html": "...","page2.html":"..."};

您可以在節點中為此目錄執行此操作：

var readAll = require('read-dir-files').read;
readAll('./pages', 'utf-8', false, function(err, files){
    if (err) return doSomething(err);

    fs.writeFile('dist/pages.js', "var PAGE_HTML=" + JSON.stringify(files), function(err){
        // ...
    });
});

在React中，您可以擁有這樣的結構：

var App = React.createClass({
    getInitialState: function(){ return {page: "page2.html"} },
    navigate: function(toPage){
        this.setState({page: toPage})
    },
    render: function(){
        return <div>
            <ul>
                <li onClick={this.navigate.bind(null, "page1.html")}>Page 1</li>
            </ul>
            <div dangerouslySetInnerHTML={{__html: PAGE_HTML[this.state.page]}} />
        </div>;
    }
});

附注：為頁面內容使用React組件沒有任何問題，它不是所有類型內容的最佳格式。 如果您需要一個可以擁有大量交互式組件的頁面，那么將它表示為組件可能是有意義的。

Answer 2

我們最近有一個類似的問題，試圖將靜態HTML集成到我們的React應用程序中（在這種情況下，HTML是一個模板，它會將React組件“注入”它，因此它可能比你的情況復雜一點）。 和你一樣，我們希望能夠創建原始HTML（因此可以通過標准工具生成）。

一位同事創建了這個庫來完成任務：

https://github.com/mikenikles/html-to-react

它解析HTML樹，將其轉換為“React樹”，您可以將其嵌入到React組件中。 這避免了使用dangerouslySetInnerHtml，並且不需要對HTML進行任何構建時預處理。