я знаю,что нельзя так писать.SetState в рендер методе

так не пиши

Как это можно по другому сделать?

но мне нужно знать сколько pointов отрендеренно

посмотри как делает react-virtualized

я знаю,что нельзя так писать.SetState в рендер методе

и еще мутировать стейт

наверняка это и не компонент)

так не пиши

можно в какие-то конкретные места вставлять, если children не позволяет

number={this.state..length + 1} не надо так

можно в какие-то конкретные места вставлять, если children не позволяет

не так

можно в какие-то конкретные места вставлять, если children не позволяет

<Some footer={<Example />} /> так можно

presets может

{ "presets": [["es2015", { "modules": false }], "react", "stage-0"], "plugins": [ "react-hot-loader/babel", "syntax-dynamic-import" ] }

number={this.state..length + 1} не надо так

почему это?

<Some footer={<Example />} /> так можно

ну я про это

Помимо всего прочего, нельзя так обращаться к текущему state внутри setState. Для этого у setState есть вторая форма с колбэком.

и еще мутировать стейт

там нет мутаций

там нет мутаций

думаешь?

{ "presets": [["es2015", { "modules": false }], "react", "stage-0"], "plugins": [ "react-hot-loader/babel", "syntax-dynamic-import" ] }

покеж сервер.жс

<Some footer={<Example />} /> так можно

зачем

зачем

эм

думаешь?

в смысле "думаю" вижу, что в коде на скриншоте их нет

зачем

шаблонные куски кода/верстки подменять

@sergeysova number={this.state..length + 1} такой код мутирует стейт?

Зачем в пропесы прокидывать цомпонент?

Зачем в пропесы прокидывать цомпонент?

а почему нет-то?

@sergeysova number={this.state..length + 1} такой код мутирует стейт?

Каким образом

@sergeysova number={this.state..length + 1} такой код мутирует стейт?

нет

@sergeysova number={this.state..length + 1} такой код мутирует стейт?

нет

Зачем в пропесы прокидывать цомпонент?

это не компонент а результат

Другое дело, что лучше это делать примерно так <SomeLayout renderFooter={() => <footer />} />

Другое дело, что лучше это делать примерно так <SomeLayout renderFooter={() => <footer />} />

не лучше

@sergeysova number={this.state..length + 1} такой код мутирует стейт?

нет

Другое дело, что лучше это делать примерно так <SomeLayout renderFooter={() => <footer />} />

разные кейсы

Другое дело, что лучше это делать примерно так <SomeLayout renderFooter={() => <footer />} />

это чем лучше то?

это чем лучше то?

у меня одной форме подобная штука есть)

у меня одной форме подобная штука есть)

зачем так?)

не лучше

лушче, потому что потребляющий компонент может по условию рендерить и не рендерить этот самый футер

лушче, потому что потребляющий компонент может по условию рендерить и не рендерить этот самый футер

он и так это может)

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

он и так это может)

ага, но я продолжил ниже)

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

ну мб и так, я подумаю

у меня одной форме подобная штука есть)

да,смешно но я понял

как делать

покеж сервер.жс

const path = require("path"); const express = require("express"); const {renderToString} = require("react-dom/server"); const App = require("./js/App"); const template = require("./template"); const app = express(); // Serving static files app.use( express.static( path.resolve( __dirname, "../dist" ) ) ); // hide powered by express app.disable('x-powered-by'); // start the server // server rendered home page app.get('/*', (req, res) => { const content = (<App/>), response = template(renderToString(content)); res.writeHead( 200, { "Content-Type": "text/html" } ); res.send(response); }); app.listen(process.env.PORT || 3000);

ну мб и так, я подумаю

плюс нередко может захотеться прокинуть в этот renderFooter ещё какие-то пропсы особенно если это не абстрактный "футер", а какой-то более динамичный элемент

плюс нередко может захотеться прокинуть в этот renderFooter ещё какие-то пропсы особенно если это не абстрактный "футер", а какой-то более динамичный элемент

ну да, лучше консистентно везде

это было очевидно

потратил часа 2,наверное.лол просто

const path = require("path"); const express = require("express"); const {renderToString} = require("react-dom/server"); const App = require("./js/App"); const template = require("./template"); const app = express(); // Serving static files app.use( express.static( path.resolve( __dirname, "../dist" ) ) ); // hide powered by express app.disable('x-powered-by'); // start the server // server rendered home page app.get('/*', (req, res) => { const content = (<App/>), response = template(renderToString(content)); res.writeHead( 200, { "Content-Type": "text/html" } ); res.send(response); }); app.listen(process.env.PORT || 3000);

Нууу ты достаешь Апп Жс и там скорее всего крашится

const content = (<App/>)

cкорее всего даже здесь

Нууу ты достаешь Апп Жс и там скорее всего крашится

в том и дело, что не понятно

ну ты конечно можешь попробывать сделай такой финт ушами

const React = require('react')

типа React.createElement?

в начале сервер.жс

но это бред

не пишите столбиками

в начале сервер.жс

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

проблема была в том, что нужно было в server.js добавить react и так же при require из App.js взять свойство default. const App = require("./js/App").default;

говорил же, потерял реакт где-то

чем нынче и как нынче проще завести ssr в существующий проект?

Но в примитивном варианте вот https://gist.github.com/evgenyrodionov/d29ab267c2c18d16b37377ca6c30232b

@romanolin

@romanolin

thx

https://medium.com/material-ui/material-ui-v1-is-out-e73ce13463eb

ERROR: S client not available

Да ну нет же

Да ну нет же

Пропсы ему не прокинуть

Это нормально, когда ты знаешь, что это необходимо. И поддерживаешь и рендер-проп и классы, наследующие компоненты

Это нормально, когда ты знаешь, что это необходимо. И поддерживаешь и рендер-проп и классы, наследующие компоненты

И все это превращается в ад

И все это превращается в ад

Рендер проп-норм

Рендер проп-норм

Он да

Это нет

Ну, у нас есть Table, принимает в себя row и head

Ну, у нас есть Table, принимает в себя row и head

Ну и говно

Если мне надо прокинуть клик

renderRow позволит легко

renderRow={<MyRow onClick={myFn}/>}

renderRow={<MyRow onClick={myFn}/>}

Выше писали почему не надо так

renderRow={<MyRow onClick={myFn}/>}

Хотя у меня раньше так было

Сейчас переделываю все на функции

Row={MyRow} Это ад

<Table         className="M0"         renderRow={({ item }) => (           <TableRow key={item.id} item={item} t={t} confirmDeleteExtract={confirmDeleteExtract} />         )}         renderHeader={props => <TableHeader {...props} t={t} />}         data={data}       />

<Table         className="M0"         renderRow={({ item }) => (           <TableRow key={item.id} item={item} t={t} confirmDeleteExtract={confirmDeleteExtract} />         )}         renderHeader={props => <TableHeader {...props} t={t} />}         data={data}       />

Зачем именно аргументом?

Почему в children не передать?

Почему в children не передать?

Потому что нужно много дырок в компоненте иметь

Почему в children не передать?

По какой-то причине мы решили этого не делать, по какой-не помню

как быть с промисами в реакте ?

на чем щас лучше новый проект стартовать saga/thunk/rxjs?

на чем щас лучше новый проект стартовать saga/thunk/rxjs?

На том, что лучше знаешь.

я их все знаю

Тогда странно от тебя такой вопрос слышать.

Я бы взял санки. Просто и бронебойно.

Как загрузить файл на сервер? Я не пойму, что передавать нужно на backend

ничего странного, узнать мнение сообщества

Как загрузить файл на сервер? Я не пойму, что передавать нужно на backend

google "ajax upload file to server"

на чем щас лучше новый проект стартовать saga/thunk/rxjs?

react.state + react.context ;)

ну и immer нельзя не попробовать