我想为溢出的元素添加'show more'按钮，然后只有在点击鞋子更多之后，我想显示新行

Question

我想为溢出的元素添加"显示更多"按钮，然后只有在点击shoe more后，我才想显示一行新行。这是我的代码：https://codesandbox.io/s/distracted-microservice-ld267?file=/src/App.js这是我的情况，我们需要对溢出的属性(如颜色(进行处理，数据将动态显示大小，如果有更多的元素，我们需要这样做。这是我想制作的UI，只需检查一下它就会帮助你

Answer 1

这里有一个解决方案：它的主要工作方式是知道包含的div需要的大小，这样我们就可以将高度设置为一行的高度。然后设置overflow: hidden以隐藏第一行之后的所有内容的显示。

这使用CSS变量来允许更动态地设置颜色方块的大小(基于代码中显示的按钮(。每个大小按钮都会更改--sizeCSS变量以更改方形大小。

因此，包含div的高度是height: calc(var(--size) + var(--margin) * 2);，它根据变量动态计算高度，因此当按下按钮后色块改变大小时，高度会发生变化。

"；显示更多"/"显示较少"；按钮切换showMore状态。

const { useState } = React;
const sizeToNumber = {
standard: "30px",
medium: "50px",
small: "15px",
large: "75px",
"Extra Large": "100px",
"Extra Small": "5px"
};
function App() {
// The current size in pixels - To be used as a CSS variable
const [size, setSize] = useState(sizeToNumber.standard);
const onSizeChange = (val) => {
// Convert from the string text to a pixel value
setSize(sizeToNumber[val]);
};
// State for hiding and showing the extra rows
const [showMore, setShowMore] = useState(true);
let data = [
{
id: 1,
name: "Color",
value: [
"red",
"green",
"yellow",
"blue",
"red",
"green",
"yellow",
"blue",
"red",
"green",
"yellow",
"blue",
"red",
"green",
"yellow",
"blue",
"red",
"green",
"yellow",
"blue",
"red",
"green",
"yellow",
"blue"
]
},
{
id: 2,
name: "Size",
value: [
"standard",
"medium",
"small",
"large",
"Extra Large",
"Extra Small"
]
}
];
return (
// Setup --size and --margin CSS variables
<div style={{ margin: "5px", "--size": size, "--margin": "5px" }}>
{data.map((d) => {
const isColor = d.name.toLowerCase().includes("color");
const hiddenClass = isColor && !showMore ? "hide-rows" : "";
return (
<div key={d.id}>
<div>{d.name}</div>
<div
style={{ background: "aqua" }}
// Set a class if the extra rows should be hidden
className={"flex " + hiddenClass}
>
{d.value.map((val, index) => {
if (isColor) {
return (
<div
key={index}
// This class applies width/height/margin
// based on the variables
className="color-block"
style={{
background: val,
display: "inline-block"
}}
></div>
);
}
return (
<button
key={val}
// Change the --size variable based on the button pressed!
onClick={() => onSizeChange(val)}
className="btn btn-primary m-2"
>
{val}
</button>
);
})}
</div>
</div>
);
})}
<button
className="btn btn-primary m-2"
// Toggle showing/hiding everything
onClick={() => setShowMore(!showMore)}
>
{showMore ? "Show Less" : "Show More"}
</button>
</div>
);
}
ReactDOM.render(<App/>,document.getElementById('root'))

.App {
font-family: sans-serif;
text-align: center;
}

/* Setup a flex grid to the color-block's parent to make 
things render consistently */
.flex {
display: flex;
flex-wrap: wrap;
}

/* apply margin/width/height variables to the color blocks */
.color-block {
margin: var(--margin);
width: var(--size);
height: var(--size);
}

/* When the extra rows should be hidden, set the height and no overflow
Height is calculated based on the size + (margin * 2)
This way things can be dynamically changed, but this will remain possible to use
since we need to know the height in order to hide things in a reasonable way*/
.hide-rows {
height: calc(var(--size) + var(--margin) * 2);
overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="root" />

---

这是相同的一般原理，将按钮移动到与颜色对齐，并删除了色样大小的有趣变化。

这里的主要区别在于，它在颜色的div周围使用了一个flexbox跨度；显示更多"；按钮显示为内联。

const { useState } = React;
function App() {
// State for hiding and showing the extra rows
const [showMore, setShowMore] = useState(false);
let data = [
{
id: 1,
name: "Color",
value: [
"red",
"green",
"yellow",
"blue",
"red",
"green",
"yellow",
"blue",
"red",
"green",
"yellow",
"blue",
"red",
"green",
"yellow",
"blue",
"red",
"green",
"yellow",
"blue",
"red",
"green",
"yellow",
"blue"
]
},
{
id: 2,
name: "Size",
value: [
"standard",
"medium",
"small",
"large",
"Extra Large",
"Extra Small"
]
}
];
return (
<div style={{ margin: "5px" }}>
{data.map((d) => {
const isColor = d.name.toLowerCase().includes("color");
const hiddenClass = isColor && !showMore ? "hide-rows" : "";
return (
<div key={d.id}>
<div>{d.name}</div>
{/* Extra span around the flex container to make the 
flex container and the show more button inline */}
<span style={{ display: "flex" }}>
<div
style={{ background: "aqua" }}
// Set a class if the extra rows should be hidden
className={"flex " + hiddenClass}
>
{d.value.map((val, index) => {
if (isColor) {
return (
<div
key={index}
// This class applies width/height/margin
// based on the variables
className="color-block"
style={{
background: val,
display: "inline-block"
}}
></div>
);
}
return (
<button key={val} className="btn btn-primary m-2">
{val}
</button>
);
})}
</div>
{/* Only display the button on the color section */}
{/* It is super annoying to try and calculate to determine
if there's a need for the show more button.
Though doable if you know the size ahead of time*/}
{isColor && (
<button
className="btn btn-primary"
// The button needs to align itself to the top rather than default stretch
style={{ alignSelf: "flex-start", marginLeft: "5px" }}
// Toggle showing/hiding everything
onClick={() => setShowMore(!showMore)}
>
{showMore ? "Show Less" : "Show More"}
</button>
)}
</span>
</div>
);
})}
</div>
);
}
ReactDOM.render(<App />,document.getElementById('root'))

.App {
font-family: sans-serif;
text-align: center;
}

/* Setup a flex grid to the color-block's parent to make 
things render consistently */
.flex {
display: flex;
flex-wrap: wrap;
/* Setup --size and --margin CSS variables */
--size: 30px;
--margin: 5px;
}

/* apply margin/width/height variables to the color blocks */
.color-block {
margin: var(--margin);
width: var(--size);
height: var(--size);
}

/* When the extra rows should be hidden, set the height and no overflow
Height is calculated based on the size + (margin * 2)
This way things can be dynamically changed, but this will remain possible to use
since we need to know the height in order to hide things in a reasonable way*/
.hide-rows {
height: calc(var(--size) + var(--margin) * 2);
overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="root" />