import {VK} from "vk"
const Component = () => {
const vkRef = useRef(null);
useEffect(() => {
if (vkRef.current) {
VK.Widgets.Group(vkRef.current, {mode: 0, width: "220", height: "400"}, 1);
}
}, [vkRef])
return <div ref={vkRef}></div>
}const [list, setItem] = useState([]);
const keys = LocalStKeys();
let tasks = [];
for (let taskText of keys) {
let ob = {text: taskText, key: Date.now()};
tasks.push(ob);
}
setItem(tasks)
console.log(list)<Routes>
<Route path='/' element={<MainPage />} />
<Route path='/classical' element={<Classical />}>
<Route index element={<January />} />
<Route path='january' element={<January />} />
</Route>
<Route path='/page_2' element={<Page2 />} />
<Route path='/page_3' element={<Page3 />} />
<Route path='*' element={<Error404Page />} />
</Routes>import { Outlet } from 'react-router-dom';
export const ClassicalPage = () => {
return (
<div>
<Outlet />
</div>
);
};export const JanuaryPage = () => {
return (
<div>
Содержимое страницы
</div>
);
};<head> или перед</body> html документа. Этот подход даст единообразие подключения скриптов, а также все скрипты будут в одном месте. Если необходимо подключение библиотеки, вероятно, лучше воспользоваться map зависимостей в сборщике приложения. В некоторых сборщиках имеется возможность импорта напрямую по URL в файл содержащий компонент. Вы также можете написать свой метод для подключения скриптов.
<FormikTextField formik={formik} name={nickname} label="Nick Name" />export default function FormikTextField({formik, name, label}) {
return (
<TextField
name={name}
required
id={name}
label={label}
sx={{width:1}}
value={formik.values[name]}
onChange={formik.handleChange}
error={formik.touched[name] && Boolean(formik.errors[name])}
helperText={formik.touched[name] && formik.errors[name]}
/>
);
}