如何添加“显示更多”和“显示更少”按钮并根据它们渲染项目

Question

我想一次渲染10个项目，如果有多余的项目，那么下面应该显示“显示更多”按钮。如果用户单击它，则应显示更多 10 个，依此类推。

我有一个属性告诉我下一页是否有项目，如果为空，则不应显示“显示更多”按钮。

我怎样才能实现这个目标？

Answer 1

这会有帮助吗？

import React, { useEffect, useState } from 'react';
import { Button, Text, View, } from 'react-native';

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];

export default function App() {
  const [isMore, setIsMore] = useState(false);
  const [showingItems, setShowingItems] = useState([]);

  useEffect(() => {
    setShowingItems([...items.slice(0, 10)]);
    if (items.length >= 10) {
      setIsMore(true);
    }
  }, []);

  const handleMore = () => {
    setShowingItems(items.slice(0, showingItems.length + 10))
    if (showingItems.length + 10 > items.length) {
      setIsMore(false);
    }
  }

  return (
    <View>
      {showingItems.map((x) => (
        <Text key={x}>{x}</Text>
      ))}

      {isMore && <Button title="More..." onPress={handleMore} />}
    </View>
  );
};

我在没有该属性的情况下创建了上述内容。如果需要添加的话可以这样操作

  useEffect(() => {
    setShowingItems([...items.slice(0, 10)]);
    setIsMore(yourProperty);
  }, []);

Answer 2

仅当

shouldBeDisplayed

为

true

时，此代码才会显示显示更多按钮。

shouldBeDisplayed

是决定是否显示10个以上的道具。

return {
  <View>
    {shouldBeDisplayed && <Button>show more</Button>}
  </View>
}

Answer 3

const handleSeeMore = () => {
    setIsFullContentVisible((prev) => !prev);
};