Я сейчас это делаю через position absolute. То есть установил на img transition и меняю значение right 0, 100%, 200%

Но при неизвестном количестве фоток хз как быть

Фотки в массив, длина массива известна

Например

Да, фотки и так в массиве

Да при чём тут забудь про jQuery

Мне нравится подход там

А как руками сделать без package, можете объяснить?

Вызвал метод увидел окно

Абсолютно тривиальная задача то

У тебя есть три фотки. Центральная всегда видна, правая и левая для смены. Как только произошла смена, через flex order меняешь их местами, и в блоке не видимых фоток подгружаешь новые. Все

Вызвал метод увидел окно

Ну так у тебя кнопка и окно это один компонент, но окно спрятано пока стейт 0

Вот это и создает проблему))))

У тебя есть три фотки. Центральная всегда видна, правая и левая для смены. Как только произошла смена, через flex order меняешь их местами, и в блоке не видимых фоток подгружаешь новые. Все

Хм. Спасибо!

А в чем проблема?

Вложенность большая

Верстка попапа лезет

Если его в корень положить все ок

Ну с вёрсткой разберись)

Действительно

))

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

Ну не скажи, переписывать всю верстку которую делал не я...

Попап(вообще все всплывающее) рендерится отдельным элементом поверх всего дом дерева. Так сделано в топовых ant.design и material-ui, ну и в других местах тоже, скорее всего

есть ли способ в React Native как-то захендлить отображается компонент на дисплее, или нет? к примеру есть такой кейс: нужно как то отмечать уже просмотренные посты когда их скролишь использую FlatList

Попап(вообще все всплывающее) рендерится отдельным элементом поверх всего дом дерева. Так сделано в топовых ant.design и material-ui, ну и в других местах тоже, скорее всего

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

?

А как руками сделать без package, можете объяснить?

<div className={s.container}> <div className={s.wrapper} style={{transform: `translateX(${this.state.current * 200}px`}}> {images.map((el, i) => <img src={el} key={i} className={s.image} />)} </div> </div> .container { width: 200px; height: 200px; overflow-x: hidden; } .wrapper{ height: 100%; display: flex; transform: translateX(0); transition: transform 0.5s linear; } .image { width: 200px; height: 200px; }

есть ли способ в React Native как-то захендлить отображается компонент на дисплее, или нет? к примеру есть такой кейс: нужно как то отмечать уже просмотренные посты когда их скролишь использую FlatList

ты не в том чате)

Спасибо Артем

Пойду гуглить в эту степь

не знал что npm юзает раст

https://www.rust-lang.org/en-US/friends.html

ты не в том чате)

А есть ссылка на тот чат?

https://t.me/reactnative_ru

<div className={s.container}> <div className={s.wrapper} style={{transform: `translateX(${this.state.current * 200}px`}}> {images.map((el, i) => <img src={el} key={i} className={s.image} />)} </div> </div> .container { width: 200px; height: 200px; overflow-x: hidden; } .wrapper{ height: 100%; display: flex; transform: translateX(0); transition: transform 0.5s linear; } .image { width: 200px; height: 200px; }

Спасибо! Я до этого момента не пользовался style={...} и потому видимо забуксовал

Смотрите как можно: https://www.youtube.com/watch?v=SfWR3dKnFIo

https://t.me/reactnative_ru

Спасибо

Народ я тут нашел способ как решить проблему биндинга обработчиков в реакте. Небольшое предисловие - забиндить функцию нужно для того чтобы в обработчике получить данные пропсов или состояния иначе в обработчике никак не узнать по какому тудушке кликнули и т.д. Решений тут несколько Вариант 1 - который к сожалению очень часто встречается в различных туториалах - сделать тупой бинд функции или написать arrow-функцию <div onClick={this.onClick.bind(this)}>click</div> или <div onClick={()=>someFunction(this.props)}>click</div> - это дикий антипаттерн потому что на каждый рендер будет создаваться новые функции и поэтому принято использовать классы и биндить обработчики в конструкторе или использовать поля класса class App extens React.Component { onClick=()=>{ .... } render(){ return <div onClick={onClick}></div> } }Но и здесь есть недостатки. Во первых новые функции все равно будут создаваться при каждом создании компонента. Ну а во вторых и самое главное - это нельзя применить к functional stateless components или проще говоря функциями-компонентам. Но выход есть братцы! Никаких больше созданий лишних функций обработчиков которые мало того что замедляют так еще и нагружают сборщик мусора! А главное можно использовать вместе с компонентами функциями. Все что нужно это маленький хелпер который достанет нужный нам компонент а функцию-обработчик мы вообще никак не биндим или замыкаем на контекст. const App = ({todo}) => ( <div onClick={onClick}>{todo.title}</div> ); function onClick(e){ var component = getComponent(e.target); console.log('here is my todo', component.props.todo); } function getComponent(el){ return el[Object.keys(el).filter(k=>k.split('$')[0] === '__reactInternalInstance')[0]]._currentElement._owner._instance }

проще забиндить или юзать fat arrow functions

проще забиндить или юзать fat arrow functions

Не надо fat

Народ я тут нашел способ как решить проблему биндинга обработчиков в реакте. Небольшое предисловие - забиндить функцию нужно для того чтобы в обработчике получить данные пропсов или состояния иначе в обработчике никак не узнать по какому тудушке кликнули и т.д. Решений тут несколько Вариант 1 - который к сожалению очень часто встречается в различных туториалах - сделать тупой бинд функции или написать arrow-функцию <div onClick={this.onClick.bind(this)}>click</div> или <div onClick={()=>someFunction(this.props)}>click</div> - это дикий антипаттерн потому что на каждый рендер будет создаваться новые функции и поэтому принято использовать классы и биндить обработчики в конструкторе или использовать поля класса class App extens React.Component { onClick=()=>{ .... } render(){ return <div onClick={onClick}></div> } }Но и здесь есть недостатки. Во первых новые функции все равно будут создаваться при каждом создании компонента. Ну а во вторых и самое главное - это нельзя применить к functional stateless components или проще говоря функциями-компонентам. Но выход есть братцы! Никаких больше созданий лишних функций обработчиков которые мало того что замедляют так еще и нагружают сборщик мусора! А главное можно использовать вместе с компонентами функциями. Все что нужно это маленький хелпер который достанет нужный нам компонент а функцию-обработчик мы вообще никак не биндим или замыкаем на контекст. const App = ({todo}) => ( <div onClick={onClick}>{todo.title}</div> ); function onClick(e){ var component = getComponent(e.target); console.log('here is my todo', component.props.todo); } function getComponent(el){ return el[Object.keys(el).filter(k=>k.split('$')[0] === '__reactInternalInstance')[0]]._currentElement._owner._instance }

https://daveceddia.com/avoid-bind-when-passing-props/

Народ я тут нашел способ как решить проблему биндинга обработчиков в реакте. Небольшое предисловие - забиндить функцию нужно для того чтобы в обработчике получить данные пропсов или состояния иначе в обработчике никак не узнать по какому тудушке кликнули и т.д. Решений тут несколько Вариант 1 - который к сожалению очень часто встречается в различных туториалах - сделать тупой бинд функции или написать arrow-функцию <div onClick={this.onClick.bind(this)}>click</div> или <div onClick={()=>someFunction(this.props)}>click</div> - это дикий антипаттерн потому что на каждый рендер будет создаваться новые функции и поэтому принято использовать классы и биндить обработчики в конструкторе или использовать поля класса class App extens React.Component { onClick=()=>{ .... } render(){ return <div onClick={onClick}></div> } }Но и здесь есть недостатки. Во первых новые функции все равно будут создаваться при каждом создании компонента. Ну а во вторых и самое главное - это нельзя применить к functional stateless components или проще говоря функциями-компонентам. Но выход есть братцы! Никаких больше созданий лишних функций обработчиков которые мало того что замедляют так еще и нагружают сборщик мусора! А главное можно использовать вместе с компонентами функциями. Все что нужно это маленький хелпер который достанет нужный нам компонент а функцию-обработчик мы вообще никак не биндим или замыкаем на контекст. const App = ({todo}) => ( <div onClick={onClick}>{todo.title}</div> ); function onClick(e){ var component = getComponent(e.target); console.log('here is my todo', component.props.todo); } function getComponent(el){ return el[Object.keys(el).filter(k=>k.split('$')[0] === '__reactInternalInstance')[0]]._currentElement._owner._instance }

Вот уж точно не нужно обращаться к недокументированным/приватным свойствам.

в общем этот вопрос давно разобран

Вот уж точно не нужно обращаться к недокументированным/приватным свойствам.

+

А что плохого в arrow func ?

Пока не будет наглядно продемонстрирована проблема с arrow functions считаю проблему вообще надуманной.

?

Если так хочется, можно сделать статическую переменную, который присвоить пресловутую функцию. Как сделать статическую функцию можно посмотреть в онлайне (подсказка - в JS функция - это тоже объект).

Народ я тут нашел способ как решить проблему биндинга обработчиков в реакте. Небольшое предисловие - забиндить функцию нужно для того чтобы в обработчике получить данные пропсов или состояния иначе в обработчике никак не узнать по какому тудушке кликнули и т.д. Решений тут несколько Вариант 1 - который к сожалению очень часто встречается в различных туториалах - сделать тупой бинд функции или написать arrow-функцию <div onClick={this.onClick.bind(this)}>click</div> или <div onClick={()=>someFunction(this.props)}>click</div> - это дикий антипаттерн потому что на каждый рендер будет создаваться новые функции и поэтому принято использовать классы и биндить обработчики в конструкторе или использовать поля класса class App extens React.Component { onClick=()=>{ .... } render(){ return <div onClick={onClick}></div> } }Но и здесь есть недостатки. Во первых новые функции все равно будут создаваться при каждом создании компонента. Ну а во вторых и самое главное - это нельзя применить к functional stateless components или проще говоря функциями-компонентам. Но выход есть братцы! Никаких больше созданий лишних функций обработчиков которые мало того что замедляют так еще и нагружают сборщик мусора! А главное можно использовать вместе с компонентами функциями. Все что нужно это маленький хелпер который достанет нужный нам компонент а функцию-обработчик мы вообще никак не биндим или замыкаем на контекст. const App = ({todo}) => ( <div onClick={onClick}>{todo.title}</div> ); function onClick(e){ var component = getComponent(e.target); console.log('here is my todo', component.props.todo); } function getComponent(el){ return el[Object.keys(el).filter(k=>k.split('$')[0] === '__reactInternalInstance')[0]]._currentElement._owner._instance }

Жаль, что только внутреннего стейта нормального нет у тебя.

Пока не будет наглядно продемонстрирована проблема с arrow functions считаю проблему вообще надуманной.

На каждый рендер у тебя новые пропсы

Пока не будет наглядно продемонстрирована проблема с arrow functions считаю проблему вообще надуманной.

Каждый рендер у тебя создаётся функция

Каждый рендер у тебя создаётся функция

А как с этим бороться? Делать кеш в конструкторе?

Каждый рендер у тебя создаётся функция

И в чем проблема?

И в чем проблема?

Плодить мемори трафик - тоже не очень хорошая вещь. Особенно у пользователя на машине.

И в чем проблема?

Во первых не сравнить пропсы, во вторых обновление может быть часто

Во первых не сравнить пропсы, во вторых обновление может быть часто

А зачем их сравнивать?

Я вас умоляю. Покажите юзкейз, где именно создание хендлера создает проблему у пользователя.

А зачем их сравнивать?

Чтобы не рендерить когда это не нужно

Чтобы не рендерить когда это не нужно

Не совсем понял как это реализуется.

Я вас умоляю. Покажите юзкейз, где именно создание хендлера создает проблему у пользователя.

500 компонентов на странице, обновляются каждые 300мс

Я вас умоляю. Покажите юзкейз, где именно создание хендлера создает проблему у пользователя.

У меня на телефоне это проблема.

Не совсем понял как это реализуется.

shouldComponentUpdate

Чтобы не рендерить когда это не нужно

Сделай HOC который будет вызывать рендер только если пропсы поменялись

shouldComponentUpdate

Если пропсы одинаковые, то возвращаем false?

Сделай HOC который будет вызывать рендер только если пропсы поменялись

Так они разные, функция то меняется каждый рендер

У меня на телефоне это проблема.

Вот именно создание хендлера?

ERROR: S client not available

Если пропсы одинаковые, то возвращаем false?

Да

Вот именно создание хендлера?

То что люди не умеют оптимизировать

Вот именно создание хендлера?

Постоянное создание лишних функций. Да, херак-херак и в прод сделать очень просто, но сделать хорошо - это не так уж и просто.

Преждевременная оптимизация - корень всех проблем.

Преждевременная оптимизация - корень всех проблем.

Лол

Преждевременная оптимизация - корень всех проблем.

Ну давай везде использовать пузырьковую сортировку.

А то чего мы оптимизируем?

Преждевременная оптимизация - корень всех проблем.

Ну так если компонент есть, то она уже не преждевременная

Лол

Не Лол, а Кнут.

Ну так если компонент есть, то она уже не преждевременная

Согласен

Не Лол, а Кнут.

Да хоть пряник. Если ты можешь сделать сразу нормально, то почему не сделать?

Вот эта поебень наверху - это нормально?

Ты про что? Про свои сообщения?

Ты про что? Про свои сообщения?

+

Биндить можно и в конструкторе, объявляя нормальные методы, а не эти убогие фэт-функции в телк класса

Но это все равно криво

Биндить можно и в конструкторе, объявляя нормальные методы, а не эти убогие фэт-функции в телк класса

По мне убого это бинды

Эксобар

По мне убого это бинды

А что делать?

Ещё многие не знают что у конструктора компонента есть второй параметр

Ты про что? Про свои сообщения?

function getComponent(el){ return el[Object.keys(el).filter(k=>k.split('$')[0] === '__reactInternalInstance')[0]]._currentElement._owner._currentElement }

А что делать?

Стрелочные функции

И бинды убоги, и использовать фэт тоже

function getComponent(el){ return el[Object.keys(el).filter(k=>k.split('$')[0] === '__reactInternalInstance')[0]]._currentElement._owner._currentElement }

Ну, это печаль. Да.

Стрелочные функции

А если нужен стейт, то что?

И бинды убоги, и использовать фэт тоже

Ну стрелки сами по себе чуть чище выглядят

Я пересоздаю хэндлеры при смене пропсов

А если нужен стейт, то что?

Как методы

Я пересоздаю хэндлеры при смене пропсов

Сжечь

То есть как в реакт-редаксе

Ещё многие не знают что у конструктора компонента есть второй параметр

писать везде () => {} или заюзать пакет из npm для noop?)