如何在 ReactJS 中创建 Read More 组件？

以下示例介绍了如何使用useState()钩子在 React JS 中创建 Read More 组件。

先决条件：

npm & create-react-app 命令的基础知识。
useState() React hooks 的基础知识。

基本设置：您将使用create-react-app使用以下命令启动一个新项目：

npx create-react-app react-read-more

现在通过在终端中键入给定的命令转到您的react-read-more文件夹。

cd react-read-more

现在在 src 中创建components文件夹，然后转到 components 文件夹并创建一个文件ReadMore.js 。

项目结构：项目中的文件结构将如下所示。

示例：在此示例中，我们将设计一个 Read more 组件，为此我们需要操作 App.js 文件和其他创建的组件文件。

显示和隐藏文本，这就是useState()钩子发挥作用的地方。我们创建了一个功能组件Read More() ，其中我们创建了一个状态，其中第一个元素isReadMore作为初始状态，其值为 true，第二个元素作为函数setIsReadMore()用于更新状态。然后创建一个名为toggleReadMore的函数，该函数在调用时将状态 isReadMore 的值设置为与其当前值相反的值。

state isReadMore 的值决定了在条件运算符的帮助下必须显示多少文本。当我们的状态值为 true 时，它仅在字符串.slice()的帮助下显示我们文本的前 150 个字符。您可以根据自己的选择选择任意数量的字符。最后还显示了“阅读更多”链接。否则，它会在末尾显示整个文本和“少显示”链接。

当我们单击“阅读更多”链接时，toggleReadMore 在onClick函数的帮助下将状态值设置为 false，因此我们会看到整个文本的末尾带有“显示更少”链接。当我们点击“显示更少”链接时，它会将状态值设置为 true，它只显示我们的文本片段，其末尾有一个“阅读更多”链接。

我们将文本写在不同的功能组件Content()和用标记将其括起来，因此它成为 ReadMore() 函数的子项。这就是为什么我们首先在 ReadMore()函数中解构 children 的属性，以便我们可以在我们的文本字符串中访问它的值并实现上面讨论的逻辑。

ReadMore.js

import React, { useState } from "react";
import "../App.css";
  
const ReadMore = ({ children }) => {
  const text = children;
  const [isReadMore, setIsReadMore] = useState(true);
  const toggleReadMore = () => {
    setIsReadMore(!isReadMore);
  };
  return (
    
      {isReadMore ? text.slice(0, 150) : text}
      
        {isReadMore ? "...read more" : " show less"}
      
    
  );
};
  
const Content = () => {
  return (
    
      
        
          GeeksforGeeks: A Computer Science portal for geeks. 
          It contains well written, well thought and well explained
          computer science, programming articles and quizzes. 
          It provides a variety of services for you to learn, so thrive
          and also have fun! Free Tutorials, Millions of Articles, Live, 
          Online and Classroom Courses ,Frequent Coding Competitions,
          Webinars by Industry Experts, Internship opportunities, and Job
          Opportunities. Knowledge is power!
        
      
    
  );
};
  
export default Content;

App.css

.container{
  position: absolute;
  top: 10%;
  left: 23%;
  width: 50%;
}
  
.text{
  display: inline;
  width: 100%;
}
  
.read-or-hide{
  color: rgb(192,192,192);
  cursor: pointer;
}

App.js

import Content from './components/ReadMore'
  
function App() {
  return (
     
  );
}
  
export default App;

应用程序.css

.container{
  position: absolute;
  top: 10%;
  left: 23%;
  width: 50%;
}
  
.text{
  display: inline;
  width: 100%;
}
  
.read-or-hide{
  color: rgb(192,192,192);
  cursor: pointer;
}

应用程序.js

import Content from './components/ReadMore'
  
function App() {
  return (
     
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：