react.js не работает рекурсивка
выводит пустой экран
import React,{useState,useRef,useEffect} from 'react';
function Polzunok() {
const pstart= useRef(1);
const ppend= useRef(15000);
const [pstartValue, setPstartValue] = useState(1);
const [ppendValue, setPpendValue] = useState(15000);
const [lastActive, setLastActive] = useState(0);
function checkError( a, b, c){
if(c==1){
if(a>b){
a=b-100;
}else if(a<b){
console.log("this a < b");
}
}else if(c==2){
if(a>b){
b=a+100;
}else if(a<b){
console.log("a < this b");
}
}else{
console.log("else");
}
}
useEffect(() => {
pstart.current.addEventListener('change', e => {
setLastActive(1);
setPstartValue(e.target.value);
})
ppend.current.addEventListener('change', e => {
setLastActive(2);
setPpendValue(e.target.value);
})
lastActive.addEventListener('change',checkError( pstartValue, ppendValue,lastActive));
}, []);
return (
<div className="container">
<h5 className="polzName">Название</h5><br/>
<div className="slider"></div>
<div>
<input type="range" ref={pstart} className="pp" min="0" max="16000"/>
<input type="range" ref={ppend} className="pp" min="0" max="16000"/>
</div>
<div><p>"start" {pstartValue} "end" {ppendValue}<br/>"lastActive":{lastActive}</p></div>
</div>
);
}
export default Polzunok;
|
Цитата:
Цитата:
undefinedи именно это запишется в обработчик. Цитата:
Может до элемента Polzunok даже дело не доходит. P.S. И это не Node.JS... |
админ подскажи где по реакту писать?
|
и еще здесь
import React, {useState} from 'react';
import Slider from 'react-slider';
function Polzunok() {
const MIN= 1200;
const MAX= 13000;
const [values, setValues] = useState([MIN,MAX]);
return (
<div className="container">
<h5 className="polzName">Название</h5><br/>
<div className="slider"></div>
<div>
<Slider className="slider" onCange={setValues} value={values} min={MIN} max={MAX}/>
</div>
</div>
);
}
export default Polzunok;
ползунки не двигаются вот css
/*polz*/
.slider {
position: relative;
width: 100%;
border-radius: 3px;
height: 2px;
background-color: darkgrey;
}
.slider .progress{
left:25%;
right:25%;
background-color: #61b9cf;
position: absolute;
}
div.track{
background-color: #61b9cf;
border: 1px solid #61b9cf;
padding:2px;
margin: 2px;
}
div.thumb{
background-color: white;
height: 10px;
width: 10px;
border:1px solid gold;
}
div.thumb:hover{
cursor: pointer;
}
div.thumb:active{
border:1px solid black;
cursor: pointer;
}
|
riaron86, в 14й строке точно onCange, а не onChange?
|
нашел пример на js обычном отсюда http://www.codingnepalweb.com/price-range-slider-html-css-javascript/[/url]
перевожу его на react если не сложно подскажите какие ошибки
import React,{useState,useRef} from 'react';
function Polzunok() {
const rangeMin=useRef();
const rangeMax=useRef();
const usualMin=useRef();
const usualMax=useRef();
const rangeq=useRef();
const priceGap = 1000;
const [minPriceI,setMinPriceI]=useState();
const [maxPriceI,setMaxPriceI]=useState();
const [minPriceR,setMinPriceR]=useState();
const [maxPriceR,setMaxPriceR]=useState();
usualMin.addEventListener("input", e =>{
setMinPriceI(parseInt(usualMin.current.value));
setMaxPriceI(parseInt(usualMax.current.value));
if(( maxPriceI- minPriceI >= priceGap) && usualMax.current.value<= rangeMax.max){
if(e.target.className === "input-min"){
rangeMin.value = minPriceI;
rangeq.style.left = ((minPriceI / rangeMin.max) * 100) + "%";
}
}
});
usualMax.addEventListener("input", e =>{
setMinPriceI(parseInt(usualMin.current.value));
setMaxPriceI(parseInt(usualMax.current.value));
if((maxPriceI - minPriceI >= priceGap) && maxPriceI <= rangeMax.max){
if(e.target.className === "input-max"){
rangeMax.value = maxPriceI ;
rangeq.style.right = 100 - (maxPriceI / rangeMax.max) * 100 + "%";
}
}
});
rangeMin.addEventListener("input", e =>{
setMinPriceR (parseInt(rangeMin.current.value));
setMinPriceR(parseInt(rangeMax.current.value));
if((maxPriceR - minPriceR) < priceGap){
if(e.target.className === "range-min"){
rangeMin.value = minPriceR - priceGap
}else{
rangeMax.value = minPriceR + priceGap;
}
}else{
usualMin.value = 2500;
usualMax.value = 7500;
rangeq.style.left = ((2500 / rangeMin.max) * 100) + "%";
rangeq.style.right = 100 - (rangeMax / rangeMax.max) * 100 + "%";
}
});
rangeMax.addEventListener("input", e =>{
setMinPriceR (parseInt(rangeMin.current.value));
setMinPriceR(parseInt(rangeMax.current.value));
if((maxPriceR - minPriceR) < priceGap){
if(e.target.className === "range-max"){
rangeMax.value = minPriceR + priceGap;
}
}else{
usualMin.value = 2500;
usualMax.value = 7500;
rangeq.style.left = ((2500 / rangeMin.max) * 100) + "%";
rangeq.style.right = 100 - (rangeMax / rangeMax.max) * 100 + "%";
}
});
return (
<div className="dbody">
<div className="wrapper">
<header>
<h2>Price Range</h2>
<p>Use slider or enter min and max price</p>
</header>
<div className="price-input">
<div className="field">
<span>Min</span>
<input type="number" ref={usualMin} className="input-min" value="2500"/>
</div>
<div className="separator">-</div>
<div className="field">
<span>Max</span>
<input type="number" ref={usualMax} className="input-max" value="7500"/>
</div>
</div>
<div className="slider">
<div className="progress" ref={rangeq}></div>
</div>
<div className="range-input">
<input type="range" className="range-min" ref={rangeMin}min="0" max="10000" value="2500" step="100"/>
<input type="range" className="range-max" ref={rangeMin} min="0" max="10000" value="7500" step="100"/>
</div>
</div>
</div>
);
}
export default Polzunok;
|
riaron86, у вас на каждый рендер компонента будут навешиваться новые слушатели на каждый из инпутов.
Зачем вам ref'ы, если у input'ов есть onChange prop? Хотите контролируемые input'ы - https://react.dev/reference/react-do...state-variable |
спасибо заработало
|
есть еще вопрос насчет useContext
есть объект как в дочернем элементе его перебрать, как в php foreach,
import React,{createContext} from 'react';
import Navbar from "./components/Navbar";
import LeftMenu from "./components/LeftMenu";
import {AuthContext} from './context';
function App() {
const prop= {
checkboxi:
{
named:'Android',
mname:'Android'
},
polzunok:
{
name:"Цена",
start1:2000,
start2:7000,
minr:0,
maxr:10000
}};
return (
<div className="App">
<AuthContext.Provider value={prop}>
<Navbar/>
<LeftMenu/>
</AuthContext.Provider>
</div>
);
}
export default App;
import React, {useContext} from 'react';
import {AuthContext} from "../../context/index.js";
function Checkbox() {
const prop=useContext(AuthContext);
return (
<div>
<ul>
{prop.checkboxi.map(prop.checkboxi.named => (
<li>{prop.checkboxi.named}
))}</li>
</ul>
</div>
);
}
export default Checkbox;
|
Цитата:
const prop= {
checkboxi: {
named:'Android',
mname:'Android'
},
polzunok: {
name:"Цена",
start1:2000,
start2:7000,
minr:0,
maxr:10000
}
};
Object.entries(prop.checkboxi).forEach(([k, v]) => console.log(k, v))
|
чуть подправил код
const prop= { checkboxi: { OS: {id:1,mname:'android',named:'Android'}, },
import React, {useContext, useState} from 'react';
import {AuthContext} from "../../context/index.js";
function Checkbox() {
let k;
const v=[];
const prop=useContext(AuthContext);
const [check,setCheck]=useState();
setCheck(prop.checkboxi.forEach(([k, v]) => (k:v)
));
return (
<div>
<ul>
<li>{check}</li>
</ul>
</div>
);
}
export default Checkbox;
|
не получилось вот код
const prop= { checkboxi: { OS: {id:1,mname:'android',named:'Android'}, }, polzunok: { id:1, name:"Цена", start1:2000, start2:7000, minr:0, maxr:10000 }};
import React, {useContext, useState} from 'react';
import {AuthContext} from "../../context/index.js";
function Checkbox() {
const m= {};
const prop=useContext(AuthContext);
prop.checkboxi.forEach(([k, v]) => m[k]= {mname:v.mname,named:v.named});
return (
<div>
<ul>
<li>{m}</li>
</ul>
</div>
);
}
export default Checkbox;
ругается 3 раза prop.checkboxi.forEach is not a function |
Цитата:
const prop = {
checkboxi: {
OS: {id:1,mname:'android',named:'Android'},
},
polzunok: {
id:1,
name:"Цена",
start1:2000,
start2:7000,
minr:0,
maxr:10000
}
};
Object.entries(prop.checkboxi.OS).forEach(([k, v]) => console.log(k, v))
|
я хотел в объекте задать все чекбоксы и одном циклом вывести все в фасет меню
const prop= { checkboxi: { OS: {id:1,mname:'android',named:'Android'}, RAM:{ {id:1,mname: '6gb',named: '6Gb'}, {id:1,mname: '4gb',named: '4Gb'}, }, ROM: {id:1,mname: '64gb',named: '64Gb'}, }, polzunok: { id:1, name:"Цена", start1:2000, start2:7000, minr:0, maxr:10000 }};
import React, {useContext} from 'react';
import {AuthContext} from "../../context/index.js";
function Checkbox() {
const prop=useContext(AuthContext);
Object.entries(prop.checkboxi).forEach(([k, v]) =>Object.entries(prop.checkboxi.k).forEach(([j,l])=>console.log(k,j,l)) );
return (
<div>
<ul>
<li></li>
</ul>
</div>
);
}
export default Checkbox;
Но при добавлении Ram Rom phpstorm закрасил объект prop красным. еще вопрос цикл у меня правильный? |
Цитата:
Цитата:
Если цикл выводит, что тебе нужно - значит он правильный. |
компонент ползунок не видит значений при проверке в компоненте leftmenu console.log(prop.polzunok.[0].maxr) к примеру выводит без ошибок)
import React,{useContext} from 'react';
import {AuthContext} from "../context/index.js";
import Polzunok from "./elements/Polzunok";
import Checkbox from "./elements/Checkbox";
function LeftMenu() {
const prop=useContext(AuthContext);
console.log(prop.polzunok[0].maxr)
return (
<div className="LeftMenu">
<div className="polzun">
<Polzunok polz={prop.polzunok[0]}/>
</div>
</div>
);
}
//
export default LeftMenu;
import React,{useState,useRef,useEffect} from 'react';
import css from '../../css/components/Polzunok.css';
function Polzunok(polz) {
const p=polz;
const rangeq = useRef();
const [inputMin,setInputMin]=useState(p.start1);
const [inputMax,setInputMax]=useState(p.start2);
const priceGap = 1000;
useEffect(() => {
let minPrice = parseInt(inputMin),
maxPrice = parseInt(inputMax);
if((maxPrice - minPrice >= priceGap) && maxPrice <= p.maxr){
setInputMin(minPrice) ;
}else{
setInputMax(maxPrice);
rangeq.right = 100 - (maxPrice / p.maxr) * 100 + "%";
}
}, [inputMin]);
useEffect(() => {
let minPrice = parseInt(inputMin),
maxPrice = parseInt(inputMax);
if((maxPrice - minPrice >= priceGap) && maxPrice <= p.maxr){
setInputMin(maxPrice);
}else{
setInputMax(maxPrice);
rangeq.current.style.right = 100 - (maxPrice / p.maxr) * 100 + "%";
}
}, [inputMax]);
useEffect(() => {
let minVal = parseInt(inputMin),
maxVal = parseInt(inputMax);;
if((maxVal - minVal) < priceGap){
setInputMin(maxVal - priceGap);
}else{
setInputMin(minVal);
setInputMax(maxVal);
rangeq.current.style.left = ((minVal / p.maxr) * 100) + "%";
rangeq.current.style.right = 100 - (maxVal / p.maxr) * 100 + "%";
}
}, [inputMin]);
useEffect(() => {
let minVal = parseInt(inputMin),
maxVal = parseInt(inputMax);
if((maxVal - minVal) < priceGap){
setInputMax(minVal + priceGap);
}else{
setInputMin(minVal);
setInputMax(maxVal);
rangeq.current.style.left = ((minVal / p.maxr) * 100) + "%";
rangeq.current.style.right = 100 - (maxVal / p.maxr) * 100 + "%";
}
}, [inputMax]);
return (
<div className="polzunok">
<h4>{p.name}</h4>
<div className="slider">
<div className="progress" ref={rangeq}></div>
</div>
<div className="range-input">
<input type="range" className="range-min" value={inputMin} onChange={e => setInputMin(e.target.value)} min={p.minr} max={p.maxr} step="100"/>
<input type="range" className="range-max" value={inputMax} onChange={e => setInputMax(e.target.value)} min={p.minr} max={p.maxr} step="100"/>
</div>
<div className="price-input">
<div className="field">
<span>Min</span>
<input type="number" className="input-min" value={inputMin} onChange={e => setInputMin(e.target.value)}/>
</div>
<div className="separator"></div>
<div className="field">
<span>Max</span>
<input type="number" className="input-max" value={inputMax} onChange={e => setInputMax(e.target.value)}/>
</div>
</div>
</div>
);
}
export default Polzunok;
⁶ |
А сам массив porp.push({start1:2000,start2:7000,name: "Ползунок ",minr:0,maxr:10000})
|
Не работает функция unique для фильтрации массивов
|
checkboxi.push(
{id:1,mname:'os',named:'Андроид',phdr:'Операционная Система'},
{id:2,mname:'os',named:'Айос',phdr:'Операционная Система'},
{id:3,mname:'os',named:'Виндоус',phdr:'Операционная Система'},
{id:4,mname:'ram',named:'2Гб',phdr:'Оперативная Память'},
{id:5,mname:'ram',named:'4Гб',phdr:'Оперативная Память'},
{id:6,mname:'ram',named:'6Гб',phdr:'Оперативная Память'},
{id:7,mname:'ram',named:'8Гб',phdr:'Оперативная Память'},
{id:8,mname:'ram',named:'12Гб',phdr:'Оперативная Память'},
{id:9,mname:'rom',named:'32Гб',phdr:'Память'},
{id:10,mname:'rom',named:'64Гб',phdr:'Память'},
{id:11,mname:'rom',named:'128Гб',phdr:'Память'},
{id:12,mname:'rom',named:'256Гб',phdr:'Память'},
{id:13,mname:'diagonal',named:'5.8',phdr:'Диагональ'},
{id:13,mname:'diagonal',named:'6.2',phdr:'Диагональ'},
{id:13,mname:'diagonal',named:'6.4',phdr:'Диагональ'},
{id:13,mname:'diagonal',named:'6.6',phdr:'Диагональ'},
{id:13,mname:'dpi',named:'1280 × 720',phdr:'Разрешение'},
{id:13,mname:'dpi',named:'1920 × 1080',phdr:'Разрешение'},
{id:13,mname:'dpi',named:'3840 × 2160',phdr:'Разрешение'},
{id:13,mname:'dpi',named:'7680 × 4320',phdr:'Разрешение'},
{id:13,mname:'dsim',named:'2x SIM',phdr:'Количество Сим Карт'},
{id:13,mname:'dsim',named:'1x SIM',phdr:'Количество Сим Карт'},
)
import React from 'react';
function Checkboxes(check) {
const m=0;
const n='';
const f=[];
const d=[];
Object.entries(check.props.checkboxi).forEach(([k, v])=>f.push(k,v));
f.forEach(function(n,m,d){
if(d.includes(n)){
console.lod('в d уже есть n');
}else{
d.push(n);
console.log(d);
}
});
//console.log(f);
return (
<div>
{}
</div>
);
}
export default Checkboxes;
|
riaron86, вы суда просто какие-то фрагменты кода постите?
|
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import css from './css/main.css';
import App from './App.js';
const root=ReactDOM.createRoot( document.getElementById('root'));
root.render(
<div style={css}>
<App/>
</div>
);
App.js
import React,{createContext} from 'react';
import Navbar from "./components/Navbar";
import LeftMenu from "./components/LeftMenu";
import {AuthContext} from './context';
function App() {
const prop = [];
const polzunok=[];
const checkboxi=[];
polzunok.push(
{
id: 1,
name: "Цена",
start1: 2000,
start2: 7000,
minr: 0,
maxr: 10000,
},
);
checkboxi.push(
{id:1,mname:'os',named:'Андроид',phdr:'Операционная Система'},
{id:2,mname:'os',named:'Айос',phdr:'Операционная Система'},
{id:3,mname:'os',named:'Виндоус',phdr:'Операционная Система'},
{id:4,mname:'ram',named:'2Гб',phdr:'Оперативная Память'},
{id:5,mname:'ram',named:'4Гб',phdr:'Оперативная Память'},
{id:6,mname:'ram',named:'6Гб',phdr:'Оперативная Память'},
{id:7,mname:'ram',named:'8Гб',phdr:'Оперативная Память'},
{id:8,mname:'ram',named:'12Гб',phdr:'Оперативная Память'},
{id:9,mname:'rom',named:'32Гб',phdr:'Память'},
{id:10,mname:'rom',named:'64Гб',phdr:'Память'},
{id:11,mname:'rom',named:'128Гб',phdr:'Память'},
{id:12,mname:'rom',named:'256Гб',phdr:'Память'},
{id:13,mname:'diagonal',named:'5.8',phdr:'Диагональ'},
{id:13,mname:'diagonal',named:'6.2',phdr:'Диагональ'},
{id:13,mname:'diagonal',named:'6.4',phdr:'Диагональ'},
{id:13,mname:'diagonal',named:'6.6',phdr:'Диагональ'},
{id:13,mname:'dpi',named:'1280 × 720',phdr:'Разрешение'},
{id:13,mname:'dpi',named:'1920 × 1080',phdr:'Разрешение'},
{id:13,mname:'dpi',named:'3840 × 2160',phdr:'Разрешение'},
{id:13,mname:'dpi',named:'7680 × 4320',phdr:'Разрешение'},
{id:13,mname:'dsim',named:'2x SIM',phdr:'Количество Сим Карт'},
{id:13,mname:'dsim',named:'1x SIM',phdr:'Количество Сим Карт'},
)
prop['polzunok']=polzunok;
prop['checkboxi']=checkboxi;
return (
<div className="App">
<AuthContext.Provider value={prop}>
<Navbar/>
<LeftMenu/>
</AuthContext.Provider>
</div>
);
}
export default App;
/context/index.js
import {createContext} from 'react'
export const AuthContext = createContext(null);
/components/LeftMenu.js
import React,{useContext} from 'react';
import {AuthContext} from "../context/index.js";
//import Polzunok from "./elements/Polzunok";
import Checkboxes from "./elements/Checkboxes";
function LeftMenu() {
const propk=useContext(AuthContext);
//console.log(propk);
return (
<div className="LeftMenu">
<div className="polzun">
<Checkboxes props={propk.checkboxi}/>
</div>
</div>
);
}
//
export default LeftMenu;
/components/elements/Checkboxes.js
import React from 'react';
function Checkboxes(check) {
const m=0;
const n='';
const f=[];
const d=[];
Object.entries(check.props).forEach(([k, v])=>f[k]=v);
console.log(f);
//console.log(f);
return (
<div>
{}
</div>
);
}
export default Checkboxes;
нужно получить уникальные значения phdr и по ним группируя вывести в меню checkbox ы |
В вашем index.js вы импортируете css-файл и вставляете его содержимое как значение атрибута style дива. Работает?
В вашем App.js вы каждый раз пересоздаете массив данных для контекста, может стоит вынести эти данные из компонента или вообще использовать хук useReducer? Тут вообще непонятно зачем вам эти данные и что вы собираетесь с ними делать. Там же: инициализировать константу prop с типом array для того, чтобы добавить ему 2 свойства - звучит как глупость. Может стоит использовать тип object? LeftMenu.js: зачем читать значение контекста и прокидывать его значение дочернему компоненту, если дочерний компонент сам может обратиться к контексту? Ключ props для props'ов компонента - звучит мощно. Checkboxes.js: даже не представляю, что вы пытаетесь сделать. Ваш check.props - уже массив, нет смысла для его перебора использовать Object.entries. Попробуйте начать с изучения основ JavaScript, потом почитайте документацию React и через годик у вас все получится. Пытаться решить задачу методом тыка - такое себе, этот топик прямое тому доказательство. |
изображения не показывает в чем ошибка?
Shop.js
import React,{useContext} from 'react';
import {AuthContext} from "../context/index.js";
import Item from "./Item";
import shop from '../css/components/shop.css';
function Shop(props) {
const propk=useContext(AuthContext);
return (
<div className="shop">
{propk.products.map(function (data){
return(
<div className='items'>
<Item key={data.id} model={data.model} prise={data.prise} desc={data.desc} img={data.img}/>
</div>
)
})}
</div>
);
}
export default Shop;
Item.js
import React from 'react';
function Item(props) {
var aimg='';
return (
<div>
{ props.img ? <img className="itemimg" src={props.img} /> : <img className="itemimg" src='./../../public/imgs/emptyimg.jpeg'/>}
<p>Модель:{props.model}</p>
<p>Цена:{props.prise}</p>
<p>Описание:{props.desc}</p>
</div>
);
}
export default Item;
|
Цитата:
|
что вы придрались к контексту он у меня прекрасно работает, просто надо какую то реакт функцию прописать чтобы каатринки показывало и все.
Статично картинки в реакт умею выводить, как динамично вывести весь код нормально показывает и показывает иконку когда указываешь неправильный путь к карнтинке |
Цитата:
|
Цитата:
Цитата:
|
обновил App.js
import React,{createContext} from 'react';
import Navbar from "./components/Navbar";
import LeftMenu from "./components/LeftMenu";
import {AuthContext} from './context';
import Shop from "./pages/Shop.js";
function App() {
const prop = [];
const polzunok=[];
const checkboxi=[];
const products=[];
polzunok.push(
{
id: 1,
name: "Цена",
start1: 2000,
start2: 7000,
minr: 0,
maxr: 10000,
},
);
checkboxi.push(
{id:1,mname:'os1',named:'Андроид',phdr:'Операционная Система'},
{id:2,mname:'os2',named:'Айос',phdr:'Операционная Система'},
{id:3,mname:'os3',named:'Виндоус',phdr:'Операционная Система'},
{id:4,mname:'ram1',named:'2Гб',phdr:'Оперативная Память'},
{id:5,mname:'ram2',named:'4Гб',phdr:'Оперативная Память'},
{id:6,mname:'ram3',named:'6Гб',phdr:'Оперативная Память'},
{id:7,mname:'ram4',named:'8Гб',phdr:'Оперативная Память'},
{id:8,mname:'ram5',named:'12Гб',phdr:'Оперативная Память'},
{id:9,mname:'rom1',named:'32Гб',phdr:'Память'},
{id:10,mname:'rom2',named:'64Гб',phdr:'Память'},
{id:11,mname:'rom3',named:'128Гб',phdr:'Память'},
{id:12,mname:'rom4',named:'256Гб',phdr:'Память'},
{id:13,mname:'diagonal1',named:'5.8',phdr:'Диагональ'},
{id:14,mname:'diagonal2',named:'6.2',phdr:'Диагональ'},
{id:15,mname:'diagonal3',named:'6.4',phdr:'Диагональ'},
{id:16,mname:'diagonal4',named:'6.6',phdr:'Диагональ'},
{id:17,mname:'dpi1',named:'1280 × 720',phdr:'Разрешение'},
{id:18,mname:'dpi2',named:'1920 × 1080',phdr:'Разрешение'},
{id:19,mname:'dpi3',named:'3840 × 2160',phdr:'Разрешение'},
{id:20,mname:'dpi4',named:'2280×1080',phdr:'Разрешение'},
{id:21,mname:'dsim1',named:'2x SIM',phdr:'Количество Сим Карт'},
{id:22,mname:'dsim2',named:'1x SIM',phdr:'Количество Сим Карт'},
{id:23,mname:'samsung',named:'Samsung',phdr:'Бренд'},
{id:24,mname:'apple',named:'Apple',phdr:'Бренд'},
{id:25,mname:'huawei',named:'Huawei',phdr:'Бренд'},
{id:26,mname:'xiaomi',named:'Xiaomi',phdr:'Бренд'},
{id:27,mname:'meizu',named:'Meizu',phdr:'Бренд'},
{id:28,mname:'asus',named:'Asus',phdr:'Бренд'},
{id:29,mname:'alcatel',named:'Alcatel',phdr:'Бренд'},
{id:30,mname:'lenovo',named:'Lenovo',phdr:'Бренд'},
)
var checkbox1=[1,8,12,15,19,22,23];
var checkbox2=[1,6,11,13,20,22,26];
var checkbox3=[2,6,11,14,20,22,24];
var checkbox4=[1,7,12,16,20,22,25];
var checkbox5=[1,7,12,16,19,22,27];
var checkbox6=[1,8,12,16,20,22,28];
var checkbox7=[3,5,10,13,18,21,29];
var checkbox8=[1,4,9,13,17,22,30];
products.push(
{id:1,img:'/../public/imgs/sgs20.jpg', model:"s20",prise:20000,desc:"Мощный и надежный",checkboxid:checkbox1},
{id:2,img:null, model:"Mi Play",prise:8414,desc:"Функциональный",checkboxid:checkbox2},
{id:3,img:null, model:"iPhone 14",prise:75682,desc:"Мощный",checkboxid:checkbox3},
{id:4,img:null, model:"Nova 10 SE",prise:18109,desc:"Красивый",checkboxid:checkbox4},
{id:5,img:null, model:"18s",prise:53099.56,desc:"Цена Качество",checkboxid:checkbox5},
{id:6,img:null, model:"Смартфон ASUS ROG Phone 6D ",prise:53450,desc:"Производительный",checkboxid:checkbox6},
{id:7,img:null, model:"One Touch Idol 4 Pro",prise:17514,desc:"Оптимальный",checkboxid:checkbox7},
{id:8,img:null, model:"A7000",prise:9000,desc:"Доступный",checkboxid:checkbox8},
)
prop['polzunok']=polzunok;
prop['checkboxi']=checkboxi;
prop['products']=products;
return (
<div className="App">
<AuthContext.Provider value={prop}>
<Navbar/>
<LeftMenu/>
<Shop/>
</AuthContext.Provider>
</div>
);
}
export default App;
|
| Часовой пояс GMT +3, время: 21:08. |