在@react-pdf/renderer中隐藏最后一页View组件问题求助

问题核心是：View组件并不支持Text那样的render属性，所以照搬Text的写法肯定无效。下面给你几个可行的解决办法：

方法1：使用usePage钩子（函数组件适用） #

通过usePage钩子可以获取当前页码和总页数，直接做条件渲染：

import { View, usePage } from '@react-pdf/renderer';

// 自定义组件
const MyViewComponent = () => {
  const { pageNumber, totalPages } = usePage();

  return (
    <>
      {pageNumber !== totalPages && (
        <View style={styles.paragraph}>
          {/* 这里放View内的内容 */}
          Show this content
        </View>
      )}
    </>
  );
};

方法2：通过Page组件的render属性传递页码 #

如果你的View直接嵌套在Page组件内，可以利用Page的render参数获取页码信息，再做条件渲染：

import { Document, Page, View } from '@react-pdf/renderer';

const MyDocument = () => (
  <Document>
    <Page
      render={({ pageNumber, totalPages }) => (
        <>
          {/* 页面其他内容 */}
          {pageNumber !== totalPages && (
            <View style={styles.paragraph}>
              Show this content
            </View>
          )}
        </>
      )}
    />
  </Document>
);

方法3：类组件的条件渲染方案（兼容旧写法） #

如果仍在使用类组件，可以通过props传递页码信息，再控制View的显示：

import { View, Page } from '@react-pdf/renderer';

class MyClassView extends React.Component {
  render() {
    const { pageNumber, totalPages } = this.props;
    return (
      pageNumber !== totalPages && (
        <View style={styles.paragraph}>
          Show this content
        </View>
      )
    );
  }
}

// 在Page组件中使用时传递参数
<Page render={({ pageNumber, totalPages }) => (
  <MyClassView pageNumber={pageNumber} totalPages={totalPages} />
)} />

这几种方法里，方法1是当前React生态的主流写法，逻辑清晰且易于维护。

内容的提问来源于stack exchange，提问作者Nimra Haider