如何拥有“show more/less”功能？

客官°小女子只卖身不卖艺 2023-09-28 23:00 4阅读 0赞

> 每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。

扫码关注《Java学研大本营》，加入读者群，分享更多精彩

我想在我的页面上显示一个元素列表，并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。

![9d0538bd04a6bf87a850e0494bdb989b.png][]

为此，我将使用 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开发入门者的自学用书，还可供开发人员查阅、参考。

![bc6b6f7e608b0d4818a0090b2ba8f2ea.jpeg][]

> > > > ### 精彩回顾 ###
> > 
> > [想要代码干净又整洁？这里有十大原则][Link 1]
> > 
> > [通过自学成为开发者的 9 种方法][9]
> > 
> > [怎么做一个有产品意识的软件工程师？][Link 2]

> > 扫码关注《Java学研大本营》，加入读者群，分享更多精彩

[9d0538bd04a6bf87a850e0494bdb989b.png]: https://img-blog.csdnimg.cn/img_convert/9d0538bd04a6bf87a850e0494bdb989b.png
[bc6b6f7e608b0d4818a0090b2ba8f2ea.jpeg]: https://img-blog.csdnimg.cn/img_convert/bc6b6f7e608b0d4818a0090b2ba8f2ea.jpeg
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzkzMDM3MjI3Nw==&mid=2247484467&idx=1&sn=a03c98cecf89bf808a36ea3a342c411a&chksm=c27a0be9f50d82ff7c33fc58d06ba1c3c40e4002f3ad2536cc6d23b0754cef741c0740ed1e5f#rd
[9]: https://mp.weixin.qq.com/s?__biz=MzkzMDM3MjI3Nw==&mid=2247484737&idx=1&sn=65ecbefa3f5bc306763142d86b0caae1&chksm=c27a0a9bf50d838dbdc37210590e27edd029d9f563c377829367fa5bcd1374c44ed01196d339#rd
[Link 2]: https://mp.weixin.qq.com/s?__biz=MzkzMDM3MjI3Nw==&mid=2247484703&idx=1&sn=b13abaffc02ff89c2c914ca3d1c289d6&chksm=c27a0ac5f50d83d368f7a7015b51c7eb4e463e8551c6c1dc7e4f0982cfb25f2407c9af8f6017#rd