Я пытаюсь использовать изоморфный рендеринг в React, поэтому я могу выводить статические HTML как документацию для своего приложения.
Проблема в том, что у меня есть конкретный компонент, который работает только на клиенте, потому что он ссылается на window
. Решение очевидно: не отображать его на сервере. Да, я не могу сделать это на сервере, но все же мне нужно, чтобы он был включен в мой пакет webpack
, поэтому я могу отобразить его на клиенте. Проблема в том, что код, который предотвращает рендеринг моего компонента на сервере, следующий:
function isServer() {
return ! (typeof window != 'undefined' && window.document);
}
Но isServer()
также true
, когда webpack
связывается, и я хочу, чтобы он работал нормально, когда выполняется webpack
.
Итак, как я обнаруживаю, что работает webpack
?
Я ищу что-то вроде этого:
function isWebpack() {
// what do I put here?
}
Теперь я могу сделать свой клиентский компонент обычно, если isServer()
и !isWebpack()
.
Спасибо!
ИЗМЕНИТЬ
Это компонент, который я пытаюсь построить:
function isServer() {
return ! (typeof window != 'undefined' && window.document);
}
import React from 'react';
const LED = React.createClass({
render: function () {
if(!isServer()) {
var LiveSchemaEditor = require('../../src/components/LiveSchemaEditor.js');
return <LiveSchemaEditor />;
}
return <div>I AM IN THE SERVER</div>;
}
});
export default LED;
Что меня беспокоит, что пакет webpack
содержит содержимое LiveSchemaEditor.js
, но он все еще печатает I AM IN THE SERVER
на клиенте. Это не имеет смысла.