如何在 React JS 中使用多个阅读更多选项

Question

我有带有图像和描述字段的类别。每个描述包含大文本，如果超过 200 个单词，则应显示 read more link。单击“阅读更多”时，还应显示带有 readless link 的全文。我尝试了以下代码，但如果我单击第一个子类别，它会打开所有 enter code here 类别阅读更多选项 link。如果我点击 readless 那么它适用于所有其他类别 readless link。如何使每个工作与 readmore 和 readless links.

分开

这是我的代码

我有带有图像和描述字段的类别。每个描述包含大文本，如果超过 200 个单词，则应显示 read more link。单击“阅读更多”时，还应显示带有 readless link 的全文。我尝试了以下代码，但如果我单击第一个子类别，它会打开所有 enter code here 类别阅读更多选项 link。如果我点击 readless 那么它适用于所有其他类别 readless link。如何使每个工作与 readmore 和 readless links.

分开

这是我的代码

     import React,{useState} from 'react';
    
    export function FullReport(props) {
      const [readMore, setReadMore] = React.useState(false);
      const linkName = readMore ? "...Read Less" : "...Read More";
      const [categories, setcategories] = React.useState([]);
       
      React.useEffect(() => {
          try {
            axios
              .get(
                `/getReportDetails`
              )
              .then(
                (response) => {
                  console.log(response);
                  let serverData = response.data.data;
                  let categories = [];
                  serverData.categoryDetails.forEach((data) => {
                    categories.push(data);
                  });
                  setcategories(categories);
                },
              
              );
      
          } catch (e) {
          }
        }, [categories.length);
      
    return (
    <div>
        {categories.map((sitems, ssindex) => {
        <p>{sitems.name}</p>
        <p>
          {!readMore &&
            sitems?.description?.substring(
              0,
              201
            )}
          {readMore && sitems?.description}
          <Link
            to="#"
            className="read-more-link"
            onClick={() => {
              setReadMore(!readMore);
            }}
          >
            <>
              {sitems?.description?.length >
                201 && linkName}
            </>
          </Link>
        </p>
        }
   </div>
  )};

Answer 1

您应该使用索引检查索引和管理状态，而不是使用单个布尔值。你可以很容易地用对象状态修复它，比如 const [readMore, setReadMore] = React.useState({isOpen: false, index: 0});

但我不会实施此解决方案，而是会为此部分创建新组件

        <p>{sitems.name}</p>
        <p>
          {!readMore &&
            sitems?.description?.substring(
              0,
              201
            )}
          {readMore && sitems?.description}
          <Link
            to="#"
            className="read-more-link"
            onClick={() => {
              setReadMore(!readMore);
            }}
          >
            <>
              {sitems?.description?.length >
                201 && linkName}
            </>
          </Link>
        </p>

和return它在地图函数中。您应该将您的状态放在新组件中而不是在 FullReport 组件中使用，并且您可以像现在使用的那样将其用作布尔值

const [readMore, setReadMore] = React.useState(false);

@Evren，根据你的建议，我编辑的代码在这里，分成 2 个 components.but readmore 链接在点击时不起作用 now.Kindly 帮助我纠正错误。

import React,{useState} from 'react';

export function FullReport(props) {
  const [categories, setcategories] = React.useState([]);
   
  React.useEffect(() => {
      try {
        axios
          .get(
            `/getReportDetails`
          )
          .then(
            (response) => {
              console.log(response);
              let serverData = response.data.data;
              let categories = [];
              serverData.categoryDetails.forEach((data) => {
                categories.push(data);
              });
              setcategories(categories);
            },
          
          );
  
      } catch (e) {
      }
    }, [categories.length);
  



  const ProfileItem = (sitems) => {
      const [readMore, setReadMore] = React.useState(false);
      return (
              <div>
                <p>
                  {!readMore &&
                    sitems?.description?.substring(
                      0,
                      201
                    )}
                  {readMore && sitems?.description}
                    <Link to="#" className="read-more-link" onClick={() => setReadMore(!readMore);
                                        }}>
                  {readMore ? "Read Less" : "Read more"}
                </Link>
                </p>
              </div>
            )}
                                   


      return (
          <div>
              {categories.map((sitems, ssindex) => {
                  <ProfileItem {...sitems} />
            })}
           </div>        
            );
          };

我已经为您创建了一个工作示例。在您的重构中，您没有创建新组件，您只是在 React 组件内创建了函数。这里是代码沙箱和代码

import React  from 'react';

export default function App(props) {
  const categories = [{description:'123456789'},
                      {description:'123456789'},
                      {description:'123456789'},
                      {description:'123456789'}]
   
      return (
          <div>
              {categories?.map((sitems, ssindex) => {
                return  <ProfileItem  sitems={sitems} />
                   
            })} 
           </div>        
            );
          };
export const ProfileItem = ({sitems}) => {
          const [readMore, setReadMore] = React.useState(false);
          return (
                  <div style={{border:'1px solid black', width: 300}} onClick={()=>setReadMore(!readMore)}>
                    <p  >
                    {!readMore &&
                    sitems?.description?.substring(
                      0,
                      5
                    )}
                  {readMore && sitems?.description} 
                    </p>
                  </div>
                )}

https://codesandbox.io/s/strange-sound-j93lv?file=/src/App.js

Answer 2

我创建了一个示例。可以参考这段代码link

一次开启多个读取矿石

沙盒：https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/read-multi.js

Note: 转到 codesandbox Browser/read-multi

一次打开单个读取矿石

沙盒：https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/read-single.js

Note: 转到 codesandbox Browser/read-single

您正在做的是，保持单一状态以阅读更多所有类别。

多读

每个类别都应该有一个单独的状态，并且只有在单击特定类别的阅读更多内容时才应该切换该状态。对于单个 ReadState，我采用了类别大小的布尔数组 State。

单读

您应该有一个当前打开的 readState index，如果您想打开任何其他，请将 readMore 索引重置为新索引。否则将其设置为-1，表示没有打开。

如何在 React JS 中使用多个阅读更多选项

How to work with mulltiple readmore options in reactjs

reactjs

react-hooks

use-state