base
- пример.homepage
.<div className="reference-container">
<div className="reference-container-panel">
{isToolsVisible && <div className="tools"></div>}
{isSeracpPanleVisible && <div className="searchPanel"</div>}
</div>
<div className="mainContent"></div>
</div>
.reference-container {
height: 100%;
display: grid;
grid-template-rows: max-content 1fr;
}
.reference-container-panel {
display: grid;
grid-auto-rows: max-content;
}
.reference-container-panel:empty {
display: none;
}
.tools {
height: 100px;
}
.searchPanel {
height: 50px;
}
import * as React from "react";
import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";
import dayjs, { Dayjs } from "dayjs";
export default function BasicDatePicker() {
const [date, setDate] = React.useState<Dayjs | null>(dayjs());
const onDateChange = React.useCallback((value: Dayjs) => {
setDate(value);
}, []);
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={["DatePicker", "StaticDatePicker"]}>
<DatePicker<Dayjs>
value={date}
views={["month"]}
onChange={onDateChange}
/>
<StaticDatePicker<Dayjs>
value={date}
orientation="landscape"
onChange={onDateChange}
/>
</DemoContainer>
</LocalizationProvider>
);
}
classes.bar
для элементов. А чтобы не городить такое `${classes.loader} js--loader`
можно использовать clsx или classnames. <React.StrictMode>
метод жизненного цикла ComponentDidMount
отрабатывает дважды. Документация. .map
- Вы ничего не возвращаете.{options.map(option => {
return (
<option key={option.value} value={option.value}>
{option.name}
</option>
);
})}
{options.map(option => (
<option key={option.value} value={option.value}>
{option.name}
</option>
))}
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
const users = [
{
id: 1,
firstName: 'John',
lastName: 'Doe',
age: 27
},
{
id: 2,
firstName: 'Emily',
lastName: 'Green',
age: 29
}
];
const Home = () => {
return (
<ul>
{users.map(user => (
<li key={user.id}>
<Link to={`/${user.id}`}>{user.firstName} {user.lastName}</Link>
</li>
))}
</ul>
);
};
const User = () => {
const params = useParams();
const id = parseInt(params.id);
const user = users.find((entry) => entry.id === id);
if (user === undefined) {
return <p>User not found</p>;
}
return (
<>
<ul>
<li><storng>Firstname</storng>: {user.firstName}</li>
<li><storng>Lastname</storng>: {user.lastName}</li>
<li><storng>Age</storng>: {user.age}</li>
</ul>
<Link to="/">Go back</Link>
</>
);
};
const root = createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<Routes>
<Route index element={<Home />} />
<Route path=":id" element={<User />} />
</Routes>
</BrowserRouter>
);
interface ComponentProps<V, D> {
value: V;
data: D;
}
const Component = <V, D>({ value, data }: ComponentProps<V, D>) => <></>;