Изоморфный React, невозможно отобразить как строку, потому что у меня нет действительного элемента реагирования?

У меня возникли серьезные проблемы с настройкой реакции на рендеринг на стороне сервера. Вот мои файлы, относящиеся к моей проблеме: https://bitbucket.org/snippets/imattacus/g9r6

Я следую учебным пособиям в Интернете, и я просто делаю то, что, как я вижу, делают другие люди, - но у меня сложилось впечатление, что я создал реагирующий компонент (класс?), И мне нужно реагировать.createElement() на компонент i мы сделали так, что это может быть оказано.

Но я не понимаю, как это сделать, потому что createElement требует позиции в DOM?

Я только новичок, чтобы реагировать, так что я, возможно, что-то совершенно не понял по пути - но можете ли вы, ребята, увидеть какую-либо проблему в моем коде, которая вызвала бы "инвариантную ошибку", неспособную использовать renderToString в недействительном ReactElement?

Спасибо!

Источник

1 ответ

Решение

Я полагаю, это потому, что вы пытаетесь отобразить всю html-страницу, включая html-тэги, что я не думаю (не на 100%), является допустимым.

Вот несколько фрагментов кода, которые я использую для рендеринга реагирующего сервера. (Я использую коа) код сервера

this.body = yield RENDER("index", { TEMPLATE: React.renderToString(<IndexView/>) });

Стандартная HTML-страница

<html>
<head>...</head>
    <body>
            <div id="app-root">{{ TEMPLATE|safe }}</div>
    </body>
    </html>

И этот фрагмент JavaScript на стороне клиента

React.render(<IndexView/>, document.getElementById('app-root'));

Короче говоря, не включайте теги html / head в JSX. Иметь layout.html или сортировку сортировки и монтировать компонент React либо в document.body, либо в элемент с заданным идентификатором.

Источник
Другие вопросы по тегам