Reactjs -在数组中添加一个read more按钮来隐藏/显示多于3个项目

Question

我正在创建一个react应用程序与数组显示项目列表，试图添加一个读取更多和隐藏项目，如果列表项目计数大于3。

我的codesandbox在下面。谁能帮我解决这个问题?

https://codesandbox.io/s/eloquent-gates-xtkr4y?file=/src/comp.js

Answer 1

您可以有条件地呈现它。因此，您使用一个按钮来呈现数组的前三个项目，该按钮表示read more。如果您单击该按钮，它会将条件渲染的状态更改为true，渲染整个数组而不是前3个项目。一旦你点击read more，你可以用另一个条件，使用相同的状态将其更改为hide。一旦你再次按下hide，它会将状态设置为false，并再次渲染前三个项目。

代码示例:

import "./styles.css";
import { useState } from "react";
export default function App() {
const [toggleHide, setToggleHide] = useState(false);
const array = ["apple ", "pear ", "banana ", "melon ", "grapes "];
const newArray = array.slice(0, 3);
const [buttonText, setButtonText] = useState("read more");
function handleClick() {
if (!toggleHide) {
setButtonText("hide");
} else {
setButtonText("read more");
}
setToggleHide(!toggleHide);
}
return (
<div className="App">
{!toggleHide ? <h1>{newArray}</h1> : <h1>{array}</h1>}
<button onClick={() => handleClick()}>{buttonText}</button>
</div>
);
}

Codesandbox链接:https://codesandbox.io/s/toggle-readme-w0c7id?file=/src/App.js

Answer 2

maybe this will help you

import React, {useEffect, useState} from "react";
const Comp = ({car}) => {
const [count, setCount] = useState([]);
const [more, setMore] = useState(false);
useEffect(() => {
let arr = [];
for (let i = 0, t = Math.floor(Math.random() * 5); i < t; i++) {
arr.push(i);
}
return () => {
arr.length >= 3 ? setMore(true) : setMore(false)
setCount(arr);
}
}, []);
const doSomething = () => {
console.log('Your Logic Here')
}
return (
<div>
{count?.length > 0 &&
count.map((i) => {
return <div key={i}>{i}</div>;
})}
{more && <button onClick={doSomething}> More List </button>}
</div>
);
// return <li>{car.name}</li>;
};
export default Comp;