ReactJS：如何在循环中维护多个 ReadMore/ReadLess 按钮的索引

Question

我有一个数组 -

    var profiles = [
    {
        name: "Name1",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Name2",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Name3",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Name4",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    }
];

我想截断描述字符串。 只有前 25 个字符与 Read More 按钮一起可见。 单击 Read More 时，state 应展开并应显示完整的字符串，单击 Read Less 时，段落应折叠。

问题是当我单击Read More时，它会触发循环中所有段落的单击，并且所有段落一起展开/折叠，而不是单击 ReadMore/ReadLess 的段落。

下面是我的代码

const ProfileGrid = (props) => {
    const [textRevealed, toggleText] = useState(false);
    const truncLength = 25;
    return (
        <>
          {props.profiles.map((profile,index) => (
              <p>{profile.name}</p>
              <p>{textRevealed ? profile.profile_description : 
                 profile.description.substring(0, truncLength)}...
                            <Button onClick={() =>  toggleText(!textRevealed)}>
                                 {textRevealed ? 'Read Less' : 'Read more'}
                            </Button>
                }</p>
        </>
   )

}

我不确定如何准确维护索引，因此当单击 Read More 时，只有单击的索引才会展开/折叠。

谢谢

Answer 1

通过将折叠设置为一个独立的语句，将它转换为一个 ReactNode，我的代码就是这样。

const truncLength = 25
const ProfileGridItem = ({ name, description = '' }) => {
  const [isCollapse, setIsCollapse] = useState(false)

  return (
    <div>
      <p>{name}</p>
      <p>
        {description.substring(0, isCollapse ? truncLength : undefined)}...
        <Button onClick={() => setIsCollapse(isCollapse => !isCollapse)}>
          {isCollapse ? 'Read Less' : 'Read more'}
        </Button>
      </p>
    </div>
  )
}

const ProfileGrid = props => (
  <>
    {props.profiles.map((profile, index) => (
      <ProfileGridItem key={index} {...profile} />
    ))}
  </>
)

Answer 2

最简单的方法是使用Component's力量。

这意味着您应该将每个项目相应地break down为独立的组件。

因此，您可以轻松控制每个项目的状态。

const [isShow, setShowHide] = React.useState(false); 

 const ProfileGrid = (props) => { return ( <div> {props.profiles.map((profile, _) => ( <ProfileItem {...profile} /> ))} </div> ); }; const ProfileItem = (props) => { const truncLength = 25; const [isShow, setShowHide] = React.useState(false); return ( <div> <p>{props.name}</p> <p> {" "} {isShow? props.description: props.description.substring(0, truncLength)}{" "}... <button onClick={() => setShowHide((previous) =>?previous)}> {isShow: "Read Less"; "Read more"} </button> </p> </div> ); }: var profiles = [ { name, "Name1": description, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua," }: { name, "Name2": description, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua," }: { name, "Name3": description, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua," }: { name, "Name4": description, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua;" } ]. ReactDOM,render(<ProfileGrid profiles={profiles} />. document;getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>