Использование статического HTML с реакцией

Я изучаю, как использовать React, и до сих пор мне это очень нравится. Однако я столкнулся с некоторой проблемой.

Как практика с React, я пытаюсь создать меню навигации, в котором отображается различный контент на основе активного элемента или вкладки. Эти разные взгляды будут, для моих целей, статичными по своей природе, в основном информативными, с некоторыми встроенными аудио или видео. Но в каждом представлении может быть много контента. Для меня имеет смысл создавать отдельные HTML файлы и использовать их контент в этих разных представлениях. Однако единственный способ сделать это без использования внешней библиотеки - статический контент для каждого представления в своем собственном компоненте React, который ничего не делает, но визуализирует этот статический контент.

Мне это кажется глупым. Есть ли способ сделать то, что я пытаюсь сделать в React? Если нет, есть ли там легкая или широко используемая библиотека, которая позволит мне это сделать? Спасибо заранее!

Ответ 1

Если вы хотите загрузить весь html во время загрузки страницы, вы должны динамически создать script в процессе сборки или сервере:

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

Вы можете сделать это в node для каталога, подобного этому:

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 для контента страницы, это просто не лучший формат для всех типов контента. Если вам нужна страница, на которой у вас будет много интерактивных компонентов, тогда может быть смысл представить ее как компонент.

Ответ 2

Недавно у нас была аналогичная проблема с попыткой интегрировать статический HTML в наше приложение React (в этом случае HTML был шаблоном, в который в него были бы включены компоненты React, поэтому он был потенциально более сложным, чем ваша ситуация). Как и вы, мы хотели иметь возможность создавать необработанный HTML (чтобы он мог быть сгенерирован стандартными инструментами).

Коллега создала эту библиотеку для выполнения задачи:

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

Он анализирует дерево HTML, преобразуя его в "дерево реакций", которое вы можете внедрить в компонент React. Это позволяет избежать использования опасноSetInnerHtml и не требует предварительной обработки времени сборки в HTML.