每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。
扫码关注《Java学研大本营》，加入读者群，分享更多精彩
我想在我的页面上显示一个元素列表，并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。
为此，我将使用 React。 我将从以下虚拟 API => https://jsonplaceholder.typicode.com/
我会用 axios这样做。
我的结构中将包含三个页面：App.js、Texts.js 和 Text.js。
你可以在这里找到 repo => https://github.com/muratcan-yuksel/reactShowHideBlogPost
我将在 App.js 中获取数据，然后将其与 props 一起发送，直到它到达 Text.js 组件。
首先，这是我的 App.js 文件 =>
应用组件
//App.js
import { React, useState, useEffect } from "react";
import axios from "axios";
import Texts from "./Texts";
const App = () => {
const url = "https://jsonplaceholder.typicode.com/posts";
const [data, setData] = useState([]);
const getData = async () => {
try {
const req = await axios.get(url);
const res = await req.data;
setData(res.slice(0, 5));
} catch (error) {
console.log(error);
}
};
//useEffect runs once when the component is mounted
useEffect(() => {
getData();
}, []);
return (
<main>
<Texts props={data} />
{/* <div>
{data.map((e) => {
return <div key={e.id}>{e.title}</div>;
})}
</div> */}
</main>
);
};
export default App;
我首先导入我将使用的钩子、axios 和子组件 Texts .
我定义了要调用的 API 端点。 您可以通过此链接检查它 => https://jsonplaceholder.typicode.com/posts 它返回用户 ID、ID、标题和正文。 我需要 body为文本。
useState hook 用于保存 state 中的数据，useEffect hook 在组件挂载时调用一次 getData 函数。
getData是一个使用axios库调用API的异步函数，用这行代码 setData(res.slice(0, 5));为了便于使用，我将从 API 返回的数组元素的数量限制为 5 个，并将状态设置为它。 它返回很多项目，我不需要所有项目。 在进行 API 调用时，我总是使用 try/catch 语法和 async/await。 这是我所知道的最好的，而且我发现语法更具可读性。
在我的 return 语句中，我将保存到 state 的数据发送到带有 props 名称的 Texts 组件 props.
让我们检查一下 Texts 组件。
文本组件
//Texts.js
import { React, useState } from "react";
import "./styles/texts.css";
import Text from "./Text";
const Texts = ({ props }) => {
return (
<div className="textComponent">
<div>
{props.map((mappedProps) => {
return <Text key={mappedProps.id} {...mappedProps} />;
})}
</div>
</div>
);
};
export default Texts;
导入相关依赖项后，我首先通过将 props关键字变成大括号。 忽略样式提示，您可以查看 github repo 中的 css 文件。
我映射从父级获得的数据，并创建一个 Text具有每个映射元素的组件。 跳过此步骤并尝试在此组件中映射和显示数据会导致显示/隐藏逻辑同时应用所有元素，即当单击一个显示/隐藏按钮时，所有其他按钮将显示/隐藏在同时。 我们不希望那样。 我们希望每个元素都单独显示/隐藏。
我通过以下方式发送道具 {...mappedProps}在子组件中获取单个键标题，以便我可以像这样导入从 API 返回的内容 =>
//Text.js
const Text = ({ body, id }) => {
...)}
文本组件
//Text.js
import { React, useState } from "react";
import "./styles/texts.css";
const Text = ({ body, id }) => {
const [readMore, setReadMore] = useState(false);
return (
<div>
<div className="text" key={id}>
{readMore ? body : `${body.substring(0, 80)}...`}
<button className="btn" onClick={() => setReadMore(!readMore)}>
{readMore ? "show less" : " read more"}
</button>
</div>
</div>
);
};
export default Text;
我首先使用 API 中给出的键名导入道具，就像这样 => const Text = ({ body, id }) => {，在我看来，这种方式可以减少混淆的空间。 我知道这是 body我在找。 我给每个单独的 div id，然后用这条线
{readMore ? body : `${body.substring(0, 80)}...`}
我告诉浏览器首先检查是否 readMore状态变量为真，如果是，显示整个测试来自 body; 如果为 false，则仅显示文本的前 80 个字符。 自从 readMore state变量在开始时设置为 false，当我打开页面时，我会看到缩短的文本。 我在缩短的文本后面有三个点。 然后我放了一个带有以下片段的按钮=>
<button className="btn" onClick={() => setReadMore(!readMore)}>
{readMore ? "show less" : " read more"}
</button>
这设置 readMore状态变量与其相反。 如果 readMore状态变量是 true，如果是“阅读更多” false. 有了这个，我就可以点击按钮来扩大和缩小文本。
快乐编码！
参考文章: https://dev.to/muratcanyuksel/code-list-items-with-show-moreless-functionality-in-react-22k0
推荐书单
《Java编程讲义》
购买链接：https://item.jd.com/13495830.html
《Java编程讲义》根据目前Java开发领域的实际需求，从初学者角度出发，详细讲解了Java技术的基础知识。
全书共15章，包括Java开发入门，Java语言基础，Java控制结构，数组，面向对象编程，继承和多态，抽象类、接口和内部类，异常处理，Java常用类库，集合与泛型，Lambda表达式，输入-输出流，多线程，JDBC数据库技术，网络编程等内容。内容全面覆盖．1ava开发必备的基础知识点，结合生活化案例展开讲解，程序代码给出了详细的注释，能够使初学者轻松领会Java技术精髓，快速掌握Java开发技能。
《Java编程讲义》适合作为高等院校相关专业的教材及教学参考书，也适合作为Java开发入门者的自学用书，还可供开发人员查阅、参考。
精彩回顾
扫码关注《Java学研大本营》，加入读者群，分享更多精彩