const { useState } = React;
const App = () => {
const [items, setItems] = useState([]);
const [numItems, setNumItems] = useState(0);
return (
<div className="w-full">
<div className="flex p-5 align-center w-full flex-col">
<div className="flex justify-center">
<button
className="border-red-500 border-2 m-2 p-2"
onClick={() => {
addItems("Item " (numItems 1));
setNumItems(numItems 1);
}}
>
Add Item
</button>
</div>
<div className="flex flex-nowrap justify-center align-center p-2 overflow-x-auto border-2 border-blue-700">
{items.map((item) => (
<div className="m-2 p-2 border-red-800 border-2 flex-shrink-0" key={item}>
<h1>{item}</h1>
</div>
))}
</div>
</div>
</div>
);
function addItems(item) {
setItems([...items, item]);
}
};
ReactDOM.render(<App />, document.getElementById("app"));
我在 React.js 中使用 Tailwind css
在上面的組件中，我有一個按鈕，它只是將 div 水平添加到自動滾動的 flexbox。問題是，我無法從中心添加 div，即如果我添加 justify-center 或 justify-content: center; 在正常的 css 中，開頭的專案會被剪掉。如何無限期地添加專案，而不會丟失專案并保持滾動能力？
代碼筆鏈接：https ://codepen.io/vineet192/pen/jOGZQZE
uj5u.com熱心網友回復：
我已經稍微更改了您的代碼段，以使其正常作業。
基本上剪輯是因為溢位 中心。
const { useState } = React;
const App = () => {
const [items, setItems] = useState([]);
const [numItems, setNumItems] = useState(0);
return (
<div className="w-full">
<div className="flex p-5 align-center w-full flex-col">
<div className="flex justify-center">
<button
className="border-red-500 border-2 m-2 p-2"
onClick={() => {
addItems("Item " (numItems 1));
setNumItems(numItems 1);
}}
>
Add Item
</button>
</div>
<div className="flex flex-nowrap justify-center align-center p-2 overflow-x-hidden border-2 border-blue-700">
<div className='flex overflow-x-auto'>
{items.map((item) => (
<div
className="m-2 p-2 border-red-800 border-2 flex-shrink-0"
key={item}
>
<h1>{item}</h1>
</div>
))}
</div>
</div>
</div>
</div>
);
function addItems(item) {
setItems([...items, item]);
}
};
ReactDOM.render(<App />, document.getElementById("app"));
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/398145.html