如何渲染嵌套数组的对象

时间:2018-05-01 19:19:15

标签: arrays json reactjs

我想渲染嵌套数组的这个对象。

我需要将所有最小的列表呈现给特定的boardId

我能得到这方面的帮助吗

需要将这些渲染为this.props .----

storyboard: {
boardList: [
  {
    boardId: 'c428148c-0f31-48d5-87a2-bf7a3eb7c3db',
    boardTitle: 'Board1',
    createdAt: 1525198421135,
    modifiedAt: 1525198466016,
    widgetList: [
      {
        widgetId: '4015e24a-aac6-4480-8cb4-a1b72c4cc5ff',
        widgetName: 'Venn',
        widgetType: 'venn',
        leftTarget: '',
        rightTarget: '',
        leftTargetValue: 0,
        rightTargetValue: 0
      },
      {
        widgetId: 'bf363922-60d6-4bf0-8f1a-ddf5c0c6eee7',
        widgetName: 'Venn',
        widgetType: 'venn',
        leftTarget: '',
        rightTarget: '',
        leftTargetValue: 0,
        rightTargetValue: 0
      }
    ]
  }
]
}

2 个答案:

答案 0 :(得分:1)

使用JSON.stringify via属性将其作为字符串传递,然后在组件内部使用。最好的方法是使用redux来存储json,然后通过react-redux中的connect()方法使用它。

答案 1 :(得分:1)

假设有多个电路板列表的可能性,您可以使用以下代码获取boardList:

const { boardList } = {...this.props.storyboard}

然后你可以通过循环遍历boardlist来获取widgetList。

以下是获取小部件的示例;

const { boardList } = {...this.props.storyboard}
const boards = boardList.map(function (board) {
  return board.widgetList.map(widget => Object.assign(widget, {boardId: board.boardId}))
})