function Box() {
return (
<>
<p>Box Component</p>
</>
);
}
function List({Component}) {
return (
<>
<Component/>
</>
);
}
function App() {
return (
<List Component={Box}/>
);
}
export default App;function List({component: Component}) {
как сделать так что бы в одном html элементе был 2 класса например обычно className={isActive ? "page : ""page active"} можно добавить дополнительный класс а как сделать на .module ?
import styles from 'Button.module.css';
import cx from 'classnames';
<button className={cx(styles.button, styles.disabled)}>Button</button>возможно ли поддерживать один код для React и React Native чтобы не переписывать заново?
Или это что-то похожее названиями, но настолько разное как Java и Java Script? :)
И если переписывать с нуля, вообще хорошая ли практика использовать React Native? Может лучше Flutter? Буду благодарен за мнения.
p.s. Не знаю играет ли это какую роль, но при написании react проекта использовался TypeScript
<Element
type="range"
value={value}
onChange={handlerChange}
onMouseUp={handlerEndInteraction}
onTouchEnd={handlerEndInteraction}
/>этот вопрос у меня относится к удобству чтения кода и просмотра сайта другими пользователями, чтобы они удостоверились в разработке на React.
От такого способа не будет видно, что применялся Реакт?
const Icon = ({title, href, active}) => {
const className = active ? 'active' : '';
return (
<Link href={href} className={`svgh m-auto ${className}`}>
{/* svg */}
</Link>
);
}'use client'
import React, {useState, useEffect} from 'react';
import Icon from './icons/Icon';
const links = [
{href: '#home_anchor', svgIcon: 'home'},
{href: '#user_anchor', svgIcon: 'user'}
// others
];
const Navbar = () => {
const [activeLink, setActiveLink] = useState('');
useEffect(() => {
const handleScroll = () => {
// logic scroll
}
// add anchor
window.addEventListener('scroll', handleScroll);
// remove anchor from unmount
return () => window.removeEventListener('scroll', handleScroll)
}, []);
return (
<nav className="flex flex-col fixed bg-gray-800 align-center">
{links.map((l) => (
<Icon href={l.href} key={l.svgIcon} title={l.svgIcon} active={activeLink === l.href}/>
))}
</nav>
);
}Есть какие-то варианты решения данной проблемы? Знаю что можно впихнуть кастомный поиск и отменить эвент ctrl + f.
<section>
<div ref={tables} className={style.tableWrapper}>
{isLoading ? createTable(currentTable) : createTable(table)}
</div>
</section>try {
const res = await axios.post(
'https://jsonplaceholder.typicode.com/posts',
JSON.stringify(sendData),
{
headers: {'Content-Type': 'application/json'}
}
);
console.log(res.data);
} catch (error) {
console.error('Error: ', error);
}а менять его неправильно. так как бы временный
Можно ли удалить файл theme.min.css из dev сборки?
если бы это было написано на чистых гридах все бы было ок. но это Bootstrap 5
.items {
grid-auto-columns: 100px;
grid-auto-flow: column;
}const prevPathname = useRef(pathname);
useEffect(() => {
if (pathname !== prevPathname.current) {
dispatch(resetRooms());
}
prevPathname.current = pathname;
}, [pathname, dispatch]);Если я правильно понимаю работу Next.js: компоненты без состояния рендерятся на сервере и могут индексироваться поисковыми роботами
А с состоянием - на стороне клиента, и роботы их не видят.
Однако в компоненте самой страницы ArticlePage у меня в любом случае будет использование useState. Значит ли это, что вся страница будет отрисовываться на клиенте?
И что поисковые роботы обойдут контент страницы стороной?
P.S. Вопрос, возможно, глупый, но я правда не понимаю...