- console.log(`userId: ${userId}`);
+ console.log('userId:', userId);<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>
))}@keyframes bg-move.@keyframes bg-move {
0% { background-position: -500px 0; }
100% { background-position: 1000px 0; }
}
- function Favorites(cardsFavorites: CardsProps): JSX.Element {
+ function Favorites({ cardsFavorites }: CardsProps): JSX.Element {const tempalte = `
<span class="c56 c77 c98">текст</span>
<span class="c101">текст</span>
<span class="c111">текст</span>
<span class="c12 c30 c98">текст</span>
`;
const parser = new DOMParser();
const root = parser.parseFromString(tempalte, 'text/html');
root.querySelectorAll('.c77, .c98, .c101').forEach((element) => {
const content = document.createElement('b');
content.append(...element.childNodes);
element.replaceWith(content);
});
console.log(root.body.innerHTML);
/*
<b>текст</b>
<b>текст</b>
<span class="c111">текст</span>
<b>текст</b>
*/const template = `
<span class="c56 c77 c98">текст</span>
<span class="c101">текст</span>
<span class="c111">текст</span>
<span class="c12 c30 c98">текст</span>
`.trim();
const classNames = ['c77', 'c98', 'c101'];
let result = template;
for (const className of classNames) {
const expression = new RegExp(`<([\\w-]+)\\s*class=".*${className}.*"\\s*>(.+)</\\1>`, 'gm');
result = result.replace(expression, (match, tag, content) => `<b>${content}</b>`);
}const classNames = ['c77', 'c98', 'c101'];
const expression = new RegExp(`<([\\w-]+)\\s*class=".*(${classNames.join('|')}).*"\\s*>(.+)</\\1>`, 'gm');
const result = template.replace(expression, (match, tag, className, content) => `<b>${content}</b>`);const keys = new Set(
Object.values(data)
.map((entry) => Object.keys(entry))
.flat()
);
const properties = Object.keys(data).map((key) => [
key.split("_").shift(),
key,
]);
const result = [...keys].reduce((acc, key) => {
acc[key] = Object.fromEntries(
properties.map(([property, type]) => [property, data[type][key] ?? 0])
);
return acc;
}, {});const mappedData = Object.entries(data).reduce((acc, [type, entry]) => {
const property = type.split('_').shift();
for (const key in entry) {
acc[key] = { ...acc[key], [property]: entry[key] };
}
return acc;
}, {});
console.log(mappedData);
/*
{
"Машины и оборудование прочие, не включенные в другие группировки": {
"active": 1,
"inactive": 2
},
"Насосное оборудование, комлектующие, сопутствующие": {
"active": 1,
"inactive": 2
},
"Электродвигатели, генераторы и трансформаторы силовые": {
"active": 1,
"inactive": 2
},
"Средства транспортные прочие, не включенные в другие группировки": {
"active": 1
}
}
*/const result = {};
const propertyMap = Object.fromEntries(Object.keys(data).map((key) => [key.split('_').shift(), key]));
for (const property in propertyMap) {
for (const key in data[propertyMap[property]]) {
result[key] ??= {};
result[key][property] = data[propertyMap[property]][key];
}
}
for (const key in result) {
for (const property in propertyMap) {
if (property in result[key] === false) {
result[key][property] = null;
}
}
}
console.log(result);
/*
{
"Машины и оборудование прочие, не включенные в другие группировки": {
"active": 1,
"inactive": 2
},
"Насосное оборудование, комлектующие, сопутствующие": {
"active": 1,
"inactive": 2
},
"Электродвигатели, генераторы и трансформаторы силовые": {
"active": 1,
"inactive": 2
},
"Средства транспортные прочие, не включенные в другие группировки": {
"active": 1,
"inactive": null
}
}
*/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>
);type FunctionDinamicParams = <T extends keyof TMap>(eventName: T, params: TMap[T]) => Promise<void>;<div class="parent__block">
<form class="child__block" data-id="1">
<div class="">name: </div><input type="text" class="name" name="name">
<div class="">surname: </div><input type="text" class="surname" name="surname">
<button type="submit">click</button>
</form>
</div>
<div class="parent__block">
<form class="child__block" data-id="2">
<div class="">name: </div><input type="text" class="name" name="name">
<div class="">surname: </div><input type="text" class="surname" name="surname">
<button type="submit">click</button>
</form>
</div>const persons = [
{ id: 1, check: 1 },
{ id: 2, check: 0 }
];
const onFormSubmit = (form) => {
form.addEventListener('submit', (event) => {
event.preventDefault();
const id = parseInt(form.dataset.id);
if (!Number.isNaN(id)) {
const formData = new FormData(form);
const person = persons.find((person => person.id === id));
person.name = formData.get('name');
person.surname = formData.get('surname');
console.log(persons);
}
});
};
document
.querySelectorAll('form[data-id]')
.forEach((form) => onFormSubmit(form));
- grid-template-columns: repeat(auto-fill, minmax(250px, auto));
+ grid-template-columns: repeat(auto-fill, 250px);const collectTree = (itemSelector, elementSelector, root = document) =>
[...root.querySelectorAll(itemSelector)].map((element) => ({
name: element.querySelector(elementSelector)?.textContent.trim(),
child: collectTree(itemSelector, elementSelector, element),
}));collectTree('ul > li', 'a');
// или
collectTree(':scope > ul > li', 'a');[
{
"name": "Вегетотропные средства",
"child": [
{
"name": "Адренолитические средства",
"child": [
{
"name": "Альфа- и бета-адреноблокаторы",
"child": []
},
{
"name": "Альфа-адреноблокаторы",
"child": [
{
"name": "Альфа-адреноблокаторы в комбинациях",
"child": []
}
]
},
{
"name": "Бета-адреноблокаторы",
"child": [
{
"name": "Бета-адреноблокаторы в комбинациях",
"child": []
}
]
},
{
"name": "Симпатолитики",
"child": [
{
"name": "Симпатолитики в комбинациях",
"child": []
}
]
}
]
},
{
"name": "Противоопухолевые средства",
"child": [
{
"name": "Алкилирующие средства",
"child": []
},
{
"name": "Антиметаболиты",
"child": []
},
{
"name": "Другие противоопухолевые средства",
"child": []
},
{
"name": "Противоопухолевые антибиотики",
"child": []
},
{
"name": "Противоопухолевые гормональные средства и антагонисты гормонов",
"child": []
},
{
"name": "Противоопухолевые средства — ингибиторы протеинкиназ",
"child": []
},
{
"name": "Противоопухолевые средства — моноклональные антитела",
"child": [
{
"name": "Противоопухолевые средства — моноклональные антитела в\n комбинациях",
"child": []
}
]
},
{
"name": "Противоопухолевые средства растительного происхождения",
"child": [
{
"name": "Противоопухолевые средства растительного происхождения в\n комбинациях",
"child": []
}
]
}
]
},
{
"name": "Разные средства",
"child": [
{
"name": "Вспомогательные вещества, реактивы и полупродукты",
"child": []
},
{
"name": "Детское питание (включая смеси)",
"child": []
},
{
"name": "Другие разные средства",
"child": []
},
{
"name": "Радиопрофилактические и радиотерапевтические средства",
"child": []
},
{
"name": "Склерозирующие средства",
"child": []
},
{
"name": "Средства для коррекции нарушений при алкоголизме, токсико- и\n наркомании",
"child": [
{
"name": "Средства для коррекции нарушений при алкоголизме, токсико-\n и наркомании в комбинациях",
"child": []
}
]
}
]
},
{
"name": "Регенеранты и репаранты",
"child": [
{
"name": "Регенеранты и репаранты в комбинациях",
"child": []
}
]
}
]
}
]interface ComponentProps<V, D> {
value: V;
data: D;
}
const Component = <V, D>({ value, data }: ComponentProps<V, D>) => <></>;type TResult = {
foo: boolean;
bar: string;
qux: number;
}
type TUnion = keyof TResult;
function fn<T extends TUnion>(value: T): TResult[T] {
switch (value) {
case 'bar': return '' as TResult[T];
case 'foo': return true as TResult[T];
case 'qux': return 1 as TResult[T];
default: throw new Error('Invalid value');
}
}
let a = fn('bar');