в чем он заключается?
Мне с мобилы неудобно это все писать
🅅aleriy
🅅aleriy
Вы братья с nick?
Никита Суханов
я ебусь с этим уже 2 часа)))
Никита Суханов
ну давай, скажи что ты следишь за инпут ом
Bowie
Лол, нет, мне надо ивент ховера
Bowie
Точнее onMouseEnter задебаунсить
Никита Суханов
а мне инпут))\
Mikhail
и в чем проблема?
Никита Суханов
кидай код
Volodymyr
e.preventDefault()
code here
e.stopPropagation() ?
Daniil
парни для вас уже создали все необходимое, зачем свой велосипед
Владислав
dangerouslySetInnerHTML
эта функция, чтобы юзать именно html а не jsx, как я понимаю. А мне нужно просто в строчке как-то что-то типа икранировать <br/>
Никита Суханов
бля, слава летающему макаранному монстру!!!!!!
Danila
Хочу всегда полный перерендер списка. <Picture key={Math.random()}/> сойдёт? Мысль в том, чтобы транзишен групп запускал транзишен появления даже если элемент остался на месте.
Bowie
React.cloneElement(
child,
{
...child.props,
onMouseEnter: debounce(show, 500),
(...)
}
Bowie
Где внутри
const show = event => {
const { scrollWidth, offsetWidth } = event.target;
if (scrollWidth > offsetTarget) {
setIsOpen(true);
}
};
Никита Суханов
useEffect(() => {
debounced(fb, updSearchBar, inputValue)
}, [fb, inputValue])
🅅aleriy
Где внутри
const show = event => {
const { scrollWidth, offsetWidth } = event.target;
if (scrollWidth > offsetTarget) {
setIsOpen(true);
}
};
А если передавать не эвент а таргет?
Никита Суханов
inputValue передается текущий, а не пердыдущий ведь?
Bowie
Нет инпута, это ховер по диву... эвент передаю не я, а браузер...
🅅aleriy
inputValue передается текущий, а не пердыдущий ведь?
Судя по вопросу у тебя стейт не обновиляется вовремя :))
🅅aleriy
Нет инпута, это ховер по диву... эвент передаю не я, а браузер...
Ну так передавай в свой обработчик не эвент а сразу таргет
Sergey
эта функция, чтобы юзать именно html а не jsx, как я понимаю. А мне нужно просто в строчке как-то что-то типа икранировать <br/>
тебе надо не экранировать, а наоборот
Bowie
Всем привет! Есть вопрос.
Есть объект:
ru: {
ensure: {
TESTING_THE_MAIN_FUNCTION_OF_THE_SITE: "Протестируем основные <br /> функции сайта"
}
}
Есть вот такой рендер в компоненте
<p className="ttl">
{ruContentTxt.ru.ensure.TESTING_THE_MAIN_FUNCTION_OF_THE_SITE}
</p>
Как поправить, чтобы <br / > оставался тегом а не строкой?
Тебе поможет либа “he”
import he from 'he';
(...)
<p className="ttl">
{he.decode(ruContentTxt.ru.ensure.TESTING_THE_MAIN_FUNCTION_OF_THE_SITE)}
</p>
Daniil
Тебе поможет либа “he”
import he from 'he';
(...)
<p className="ttl">
{he.decode(ruContentTxt.ru.ensure.TESTING_THE_MAIN_FUNCTION_OF_THE_SITE)}
</p>
нахрена ему либа ради dangerouslySetInnerHTML?
🅅aleriy
Всем привет! Есть вопрос.
Есть объект:
ru: {
ensure: {
TESTING_THE_MAIN_FUNCTION_OF_THE_SITE: "Протестируем основные <br /> функции сайта"
}
}
Есть вот такой рендер в компоненте
<p className="ttl">
{ruContentTxt.ru.ensure.TESTING_THE_MAIN_FUNCTION_OF_THE_SITE}
</p>
Как поправить, чтобы <br / > оставался тегом а не строкой?
Что тебе мешает присвоить там не тёк т а компонент?
Mikhail
Нет инпута, это ховер по диву... эвент передаю не я, а браузер...
React.cloneElement(
child,
{
...child.props,
onMouseEnter: (e)=>debounce(show, 500)(e.target),
(...)
}
const show = target => {
const { scrollWidth, offsetWidth } = target;
if (scrollWidth > offsetTarget) {
setIsOpen(true);
}
};
Sergey
Тебе поможет либа “he”
import he from 'he';
(...)
<p className="ttl">
{he.decode(ruContentTxt.ru.ensure.TESTING_THE_MAIN_FUNCTION_OF_THE_SITE)}
</p>
лол
и в тексте будет <br /> экранирован
а настоящего переноса не будет
Никита Суханов
Что тебе мешает присвоить там не тёк т а компонент?
useEffect(() => {
debounced(fb, updSearchBar, inputValue)
}, [fb, inputValue]) // а, ну так обновление компонета произойдет строго после рендера, значит, в функцию передается следующий inputValue, верно?
Sergey
Не догоняю как мне это поможет
ты вставишь текст и перенос будет воспринят как html
и перенос будет виден
Sergey
Всем привет! Есть вопрос.
Есть объект:
ru: {
ensure: {
TESTING_THE_MAIN_FUNCTION_OF_THE_SITE: "Протестируем основные <br /> функции сайта"
}
}
Есть вот такой рендер в компоненте
<p className="ttl">
{ruContentTxt.ru.ensure.TESTING_THE_MAIN_FUNCTION_OF_THE_SITE}
</p>
Как поправить, чтобы <br / > оставался тегом а не строкой?
> Как поправить, чтобы <br / > оставался тегом а не строкой?
Ты хотел решение, я тебе скинул решение.
Sergey
Не догоняю как мне это поможет
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
Никита Суханов
добрый день. список на странице формируется в зависимости от того что юзер ввел. он появляется и исчезает резко. можно сделать плавное появление?
Владислав
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
Загуглить это я и сам смог.
Vadim
добрый день. список на странице формируется в зависимости от того что юзер ввел. он появляется и исчезает резко. можно сделать плавное появление?
https://reactcommunity.org/react-transition-group/
Владислав
ес
Владислав
Там создаётся ф-я, которая возвращает обхект.
И далее в dangerouslySetInnerHTML кладётся то, что возвращает ф-я
Vadim
Там создаётся ф-я, которая возвращает обхект.
И далее в dangerouslySetInnerHTML кладётся то, что возвращает ф-я
Ну и? Какие проблемы, трудности?
🅅aleriy
Там создаётся ф-я, которая возвращает обхект.
И далее в dangerouslySetInnerHTML кладётся то, что возвращает ф-я
Зачем вы человека плохому учите?
Ему не надо dangerous...
Volodymyr
Зачем вы человека плохому учите?
Ему не надо dangerous...
А что тут плохого ? Если с бека пришел обьект в котором тебе возвращают <em> <br> как это распарсить по красивому ? Что бы ХТМЛ понял что это ХТМЛ
Mikhail
добрый день. список на странице формируется в зависимости от того что юзер ввел. он появляется и исчезает резко. можно сделать плавное появление?
https://reactcommunity.org/react-transition-group/
Volodymyr
Там создаётся ф-я, которая возвращает обхект.
И далее в dangerouslySetInnerHTML кладётся то, что возвращает ф-я
Передай в dangerouslySetInnerHTML свою приблуду там где br
🅅aleriy
А что тут плохого ? Если с бека пришел обьект в котором тебе возвращают <em> <br> как это распарсить по красивому ? Что бы ХТМЛ понял что это ХТМЛ
С бэка не должно такое говно в spa прилетать :)
Владислав
Ну и? Какие проблемы, трудности?
В каком именном месте применить dangerouslySetInnerHTML?
<p className="ttl">
dangerouslySetInnerHTML={ruContentTxt.ru.ensure.TESTING_THE_MAIN_FUNCTION_OF_THE_SITE}
</p>
здесь возвращается уже свойство, а не объект
Владислав
Так работать не будет. Вот я и не врубаюсь где обернуть этим нужно
Mikhail
С бэка не должно такое говно в spa прилетать :)
+1 у меня в проекте поддерживается пользовательское форматирование текста, храним и передаем получившийся хтмл в json виде
Volodymyr
Так работать не будет. Вот я и не врубаюсь где обернуть этим нужно
dangerouslySetInnerHTML это атрибут.
Владислав
хммм
Vadim
В каком именном месте применить dangerouslySetInnerHTML?
<p className="ttl">
dangerouslySetInnerHTML={ruContentTxt.ru.ensure.TESTING_THE_MAIN_FUNCTION_OF_THE_SITE}
</p>
здесь возвращается уже свойство, а не объект
<p dangerouslySetInnerHTML={{__html: ruContentTxt.ru.ensure.TESTING_THE_MAIN_FUNCTION_OF_THE_SITE}}>
Vadim
Ну каммон
Volodymyr
С бэка не должно такое говно в spa прилетать :)
да ладно, а если у тебя список на 100000 и тебе надо подсвечивать совпадения, а совпадения могут быть не только по названию но и по контексту( краткому описанию товара) этакий гугл серч делат, ты что на UI будешь это разруливать ?
🅅aleriy
Я это разруливал на уи
Bowie
🅅aleriy
Это намного нагруженне нежели возвращать с бэка
1. Не нужно возвращать слишком много
2. Надо уметь быструю подсветку делать на js
Иван
Ех, спасите) Я сейчас реализовываю роутинг по скроллу мыши и постоянно выходит ошибка "Cannot read property 'push' of undefined"
Я получается в саму компаненту закинул js код, который ловит событие скролла и с помощью this.history.push('/test'); пытаюсь это реализовать) Я понимаю что что то не так делаю, но никак не могу понять что именно)
Вот код
...
componentDidMount(){
$('body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
this.history.push('/test');
console.log('scrolling up !');
}
else{
console.log('scrolling down !');
}
});
...
Volodymyr
1. Не нужно возвращать слишком много
2. Надо уметь быструю подсветку делать на js
Я же сразу написал про инфинити скрол, а теперь момент, у тебя на бэке AI/ML
И моделька обучается по твоим запросам.
Владислав
<p dangerouslySetInnerHTML={{__html: ruContentTxt.ru.ensure.TESTING_THE_MAIN_FUNCTION_OF_THE_SITE}}>
Госпадиииии. Всё проще чем я думал. Спасибо. И ещё вопрос. Там в доках пишут, что это не безопастно. Что по поводу этого вообще думаете?
Volodymyr
Госпадиииии. Всё проще чем я думал. Спасибо. И ещё вопрос. Там в доках пишут, что это не безопастно. Что по поводу этого вообще думаете?
Ну если что можно в ближайшем магазине прикупить веревку и мыло )