反应pdf多行将所有行放在一行中

问题描述

我正在尝试使用以下数组：

const test = [{"Task":"Coding","Hours":2,"Rate":72},{"Task":"Testing",{"Task":"Meeting",{"Task":"Deployment",{"Task":"UAT",{"Task":"PROD",{"Task":"DEV",{"Task":"Yelling",{"Task":"New features",{"Task":"Unrelated",{"Task":"Admin","Rate":72}];

并使用 react-pdf 遍历数组以创建 pdf

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="B1" style={styles.page}>
     {test.map(lineitem => (
        <View style={styles.section}>
          <Text>{lineitem.Task},{lineitem.Hours},{lineitem.Rate}{`\n{""}`}</Text>
        </View>
      ))}
    </Page>
  </Document>
);

但行不在每一行；我在一条线上得到所有东西。我错过了什么？

解决方法

将循环更改为仅循环文本组件，如下所示：

const MyDocument = () => (
  <Document>
    <Page size="B1" style={styles.page}>
        <View style={styles.section}>
          {test.map(lineitem => (<Text>{lineitem.Task}
                {lineitem.Hours}
                {lineitem.Rate}{'\n\n'}
          </Text>))}
        </View>
    </Page>
  </Document>
);