时间戳

首页 > 解决方案 > 在 jsx 中使用 react 渲染嵌套对象

reactjs - 在 jsx 中使用 react 渲染嵌套对象

问题描述

我正在尝试使用 map 函数在 react jsx 中渲染来自 firestore 数据库的嵌套对象。像“我将保存文档”这样的“文本”属性包含在一个对象（文档）中，该对象（文档）包含一个数组 [blocks]，该数组 [blocks] 包含另一个包含对象（文本）的数组 [inlineStyleRanges]。我正在尝试渲染文本对象，我很难弄清楚语法以使其正确渲染。

该对象具有以下结构：

(4) [{…}, {…}, {…}, {…}]
0:
description: "Lorem ipsum dolor sit amet, suspendisse velit"
document:
blocks: Array(1)
0:
 data: {}
 depth: 0
 entityRanges: []
 inlineStyleRanges: []
 key: "8u7m4"
 text: "I will save this document."
 type: "unstyled"
__proto__: Object
length: 1
__proto__: Array(0)
entityMap: {}
__proto__: Object
id: Timestamp {seconds: 1551856294, nanoseconds: 879000000}
title: "TCC/NIBF SUMMARY SHEET"
__proto__: Object

我尝试的渲染方法如下所示：

render() {
  const urlID = this.state.urlID;
  const results = this.state.documents;
  const postList = results.map((result, index) => {
    if (urlID === result.id.seconds.toString()) {
      return (
        <Card key={result.id.seconds}>
          <CardBody>
            <CardTitle>File Name: {result.title}</CardTitle>
            <CardText>File Description: {result.description}</CardText>
            {/*<CardText>File Document Text: {result.document... }</CardText>*/}
          </CardBody>
        </Card>
      );
    } else {
      return null;
    }
  });
  return <div>{postList}</div>;
}

标签： reactjsnested-object

解决方案

我使用新的 es6 Map 函数制作了一个新的对象映射，我使用扩展运算符将其转换为数组，然后在 chrome 开发工具中将对象的结构作为数组查看。

经过研究，我找到了正确的语法：

<CardText>File text: {result.document.blocks["0"].text}</CardText>

推荐阅读