Почему компонент съедает div элемент, React?

Question

[xster]

Добрый день! Помогите пожалуйста разобраться почему так при server side rendering в React-е?
Получается разный рендер компонента в таких ситуациях

render() {
		return (
			<div className="header hgg" onClick={this.handleClick}> //  в этом случае все нормально
				<div>
					<h1>HEADER!!!!!</h1>
				</div>
			</div>
		)
	}

здесь проблема.

render() {
		return (
			<div className="header hgg" onClick={this.handleClick}> .// блок не выводится, хотя видно мигание, появляется и исчезает
				<h1>HEADER!!!!!</h1>
			</div>
		)
	}

Кто знает объясните пожалуйста почему так?
Спасибо!

Comments

[Kovalsky]

То есть не выводится если вложен div или речь о точке в конце строки?

[xster]

<div className="header hgg" onClick={this.handleClick}>

этот див не выводиться во втором случае... если не обгорнуть h1 еще одним дивом

Answer 1

[Сергей Андреев]

Я тут демо накидал на react 16, все норм, можете сделать демо где есть проблема?

Какие версии библиотек?

Comments

[xster]

Проблема только при Server Side Rendering

[Сергей Андреев]

xster, Так я и написал демо для ssr, в нем я использую react-dom/server

[xster]

Сергей Андреев,
Вот мой server.js

...

const app = express();

function handleRender(req, res) {

	let preloadedState = {}
	const store = createStore(rootReducer, preloadedState);
	const html = renderToString(
		<Provider store={store}>
			<div className="main-container clearfix">
				<Main/>
			</div>
		</Provider>
	);


	const finalState = store.getState();

	res.send(renderFullPage(html, finalState))

}

app.use('/assets', express.static('./src/assets'));
app.use('/dist', express.static('./dist'));
app.use(handleRender);


const port = 3008;
app.listen(port);
console.log(`Listening on port ${port}`);

использую

"react": "^16.0.0",
"redux": "^3.7.2",
"express": "^4.16.2",

причем видно, что оно изначально грузится такое как надо а затем удаляется

[Илья Герасимов]

xster, т.е сервер отдает правильно, а потом пропадает? проблема в js со стороны клиента, передаете не все данные или еще чего, из-за этого состояния разные и клиент рендерит заново.