react pdf multi lines 将所有行放在一行中

Question

我正在尝试使用下面的数组：

const test = [{"Task":"Coding","Hours":2,"Rate":72},
{"Task":"Testing","Hours":2,"Rate":72},
{"Task":"Meeting","Hours":2,"Rate":72},
{"Task":"Deployment","Hours":2,"Rate":72},
{"Task":"UAT","Hours":2,"Rate":72},
{"Task":"PROD","Hours":2,"Rate":72},
{"Task":"DEV","Hours":2,"Rate":72},
{"Task":"Yelling","Hours":2,"Rate":72},
{"Task":"New features","Hours":2,"Rate":72},
{"Task":"Unrelated","Hours":2,"Rate":72},
{"Task":"Admin","Hours":2,"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>
);

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

Answer 1

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

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>
);

react pdf multi lines 将所有行放在一行中

react pdf multi lines puts all lines in one line

reactjs

react-pdf