export const ContentContext = React.createContext()
export const arrCart = []
//Есть компонент родитель Content
function Content() {
let [cart, setCart] = useState([])
function addCart(roll) {
arrCart.push(roll)
// console.log(typeof arrCart, arrCart)
}
return (
<ContentContext.Provider value={{cart, setCart, addCart}}>
<div className={styles.content}>
<Goods />
<Cart />
</div>
</ContentContext.Provider>
);
}
//Компонент Goods он выводит товары которые можно добавить в корзину
function Goods() {
const {setCart} = React.useContext(ContentContext)
return (
// Код который выводит товары на страницу
//Кнопка которая должна добавлять в корзину()
<button onClick={()=> { addCart(roll) return setCart(roll)}} className={styles.btn__add} type='button'>Add</button>
//Компонент Cart сюда я должен получать массив
import { arrCart } from '../Content';
function Cart() {
console.log(arrCart)
return ()
}Если внутри контейнера находится длинный текст который должен переноситься, то ширина контейнера должна равняться ширине длинный текст который не должен переноситься, но не менее 200 пикселей- не в обиду, это ломает мне мозг, и я не в силах это понять, надеюсь кто-то другой подскажет
onClick={()=> { addCart() return setCart(roll)}}addCart синхронная функция что она делает - добавляет в массив cart а cart по дефолту это пустой массив, поэтому сначала добавляется пустотаimport { arrCart } from '../Content'; // за место импорта - пользуйся контекстом , если твой компонент Cart находится внутри контекста
function Cart() {
console.log(arrCart)
return ()
}span class="text-wrap" style="max-width:200px; display: block;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span><div class="col">
<div class="w-100">
<span class="text-wrap" style="max-width: 200px;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span>
</div>
</div>width: fit-content;
Подскажите, пожалуйста, как заставить контейнер переносить строку внутри, вместо того чтобы увеличиваться по ширине?
const offer_id = 'b3541fdc-82f4-4cb2-a90a-b7b0a0c61dd4';
const goals = await Goal.findAll({
limit: 3,
where: {
offerId: offer_id
},
group : ['Goal.id'],
order: [[sequelize.fn('max', sequelize.col('price')) , 'desc']],
})
console.log(goals);this.innerHTML ???!<script>
customElements.define('custom-header', class extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({mode: "open"});
shadow.innerHTML =
`
<link rel="stylesheet" href="css/Base.css">
<link rel="stylesheet" href="components/Header/css/Header.css">
<header class="Header">
<div class="HeaderBody">
<a class="Logo waves-effect waves-teal" href="#" data-LogoText="{Finsweet"></a>
<input class="HeaderMobileMenuButton" type="checkbox" aria-label="Мобильное меню" data-ToolTip="Мобильное меню">
<div class="HeaderMenu">
<nav class="NavigationRow">
<ul class="ListRow">
<li class="ListRowItem">
<a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">Home</span></a>
</li>
<li class="ListRowItem">
<a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">Blog</span></a>
</li>
<li class="ListRowItem">
<a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">About us</span></a>
</li>
<li class="ListRowItem">
<a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">Contact us</span></a>
</li>
<li class="ListRowItem">
<button class="Button ButtonWhite waves-effect" type="button"><span class="ButtonText">Subscribe</span></button>
</li>
</ul>
</nav>
</div>
</div>
</header>
`
}
});
</script>
<custom-header></custom-header>