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, время: 13:03. |