clone() объекта спрайта в PIXI.js:const clonedSprite = originalSprite.clone()if (sprite1.texture === sprite2.texture) {
// спрайты имеют одинаковую текстуру
}shape для каждого спрайта, то вы можете проверить, совпадают ли формы спрайтов:if (sprite1.shape === sprite2.shape) {
// спрайты имеют одинаковую форму
}const spriteArray = [
{ sprite: sprite1, shape: "circle", color: "red" },
{ sprite: sprite2, shape: "square", color: "blue" },
// ...
];
const selectedSprite = // выбранный пользователем спрайт
const correctSprite = spriteArray.find(
(item) => item.shape === selectedSprite.shape && item.color === selectedSprite.color
);
if (correctSprite) {
// пользователь выбрал правильный спрайт
} else {
// пользователь выбрал неправильный спрайт
}history, можно использовать свойство length. Если значение length равно 1, то это означает, что в history нет предыдущей страницы, и пользователь зашел по прямому URL.history на пустоту:import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
function goBack() {
if (history.length > 1) {
history.goBack();
} else {
// обработка случая, когда history пуста
// например, переход на главную страницу
history.push('/');
}
}
return (
<div>
<button onClick={goBack}>Назад</button>
</div>
);
}length свойство history, и если оно больше 1, то вызывает goBack(), чтобы вернуться на предыдущую страницу. Если length равно 1, то пользователь зашел по прямому URL, и код выполняет альтернативное действие (в данном случае, переход на главную страницу)
react-scripts не был установлен в вашем проекте или не был установлен правильно.react-scripts с помощью менеджера пакетов npm внутри вашего проекта. Для этого выполните следующие шаги:npm install react-scripts --save-dev. Эта команда установит react-scripts в ваш проект и добавит его в зависимости для разработки (devDependencies) в файле package.json.react-scripts уже был установлен, попробуйте запустить команду npm install для обновления зависимостей вашего проекта.
import React, { useState } from 'react';
const MyComponent = () => {
const [numOfInputs, setNumOfInputs] = useState(0);
const handleNumOfInputsChange = (event) => {
setNumOfInputs(event.target.value);
};
const inputArray = Array.from({ length: numOfInputs }, (_, index) => index + 1);
return (
<div>
<input type="number" value={numOfInputs} onChange={handleNumOfInputsChange} />
{inputArray.map((inputNum) => (
<input key={inputNum} type="text" />
))}
</div>
);
};
export default MyComponent;const handle = (e) => {
e.preventDefault()
//Запрос
}
<Link onClick={handle} to={campaignUrlsPage}>{campaign.id}</Link>discount на каждой итерации? Выводи в консоль и смотри. Затем ты забыл key указать.
setState((prev)=>{
//do something
return [...prev]
}){initialState.map((el, idx) => (
<input
onChange={(e) => showValue(e.target.value, idx)}
key={el.placeholder}
placeholder={el.placeholder}
type={el.type}
/>
))}const showValue = (value, index) => {
setState((prev)=>{
prev[index].value = value
return [...prev]
})
};{currentMovie.length &&
<Pagination
totaMoviess={totalMovies}
MoviesPerPage={MoviesPerPage}
currentPage={currentPage}
paginate={paginate}
/>
}display:none здесь вообще забудь.
export default function HeaderMenuLinks(props) {
return (
<React.Fragment>
{props.menuText.map((menu, key) => (
const subTitle = menu.subtitle || false
<li className='header-menu__link' key={key}>
<p>{menu.title}</p>
{ subTitle &&
<ul className='link-menu'>
{subTitle.map((sm, skey) => (
<li className='link-menu__subtitle' key={skey}>{sm}</li>
))}
</ul>
}
</li>
))}
</React.Fragment>
)
}const isClassName = (type) => {
switch (type) {
case "file":
return "input-file";
case "radio":
return "input-radio";
case "password":
return "input-password";
case "checkbox":
return "input-checkbox";
default:
return 'input-default'
}
};
const cl = []
if (classes) cl.push(classes)
cl.push(isClassName(type))
...
className = {cl.join(' ')}useScroll.tsimport React, { useLayoutEffect, useState} from 'react';
export const useScroll = ( ref ) => {
const [ scroll, setScroll ] = useState(false);
const updateScroll = () => {
If (!ref.current) return
let isScroll = false
const heightTop: number = window.scrollY
if(ref.current.offsetHeight < heightTop)
isScroll = true
if(heightHeaderRef.current.offsetHeight > heightTop)
isScroll = false
setScroll(isScroll)
}
useLayoutEffect( () => {
window.addEventListener('scroll',updateScroll)
updateScroll();
return () => {
window.removeEventListener('scroll',updateScroll)
}
}, [] );
return scroll;
}const Header = () => {
const heightHeaderRef = useRef<HTMLDivElement | null>(null)
const scroll = useScroll<boolean>(heightHeaderRef)
console.log(scroll)
return (
<header className={`${background} sticky top-0 left-0`} ref={heightHeaderRef}>
<div className={`${container} ${scroll ? 'py-2' : 'py-6'} duration-300`}>
<div className={'flex justify-between items-center'}>
<div className={'flex'}>
<NavLink to={''} className={'text-xl text-white mr-6'}>ГЛАВНАЯ</NavLink>
<NavLink to={'/about'} className={'text-xl text-white mr-6'}>О НАС</NavLink>
<NavLink to={'/crm'} className={'text-xl text-white mr-6'}>CRM</NavLink>
<NavLink to={'/licenses'} className={'text-xl text-white mr-6'}>ЛИЦЕНЗИИ</NavLink>
<NavLink to={'/blog'} className={'text-xl text-white mr-6'}>БЛОГ</NavLink>
<NavLink to={'/faq'} className={'text-xl text-white'}>FAQ</NavLink>
</div>
<div>
<a className={'text-white text-center block text-2xl'} href="tel::+7(385) 299-20-21">+7(385) 299-20-21</a>
<div className={'text-white text-center block text-xs'}>ЗВОНОК ПО РОССИИ БЕСПЛАТНЫЙ</div>
</div>
</div>
</div>
</header>
)
}
export default Header