Question

我在将一些JSON数据渲染到React Table（来自库react-table）时遇到了一些问题。这是我正在使用的json的例子：

const translateditems = [
  {
    id: 1,
    colonne1: [
      {
        language: 'en',
        content: 'Column n°1'
      },
      {
        language: 'fr',
        content: 'Colonne n°1'
      }
    ],
    colonne2: [
      {
        language: 'en',
        content: 'Column n°2'
      },
      {
        language: 'fr',
        content: 'Colonne n°2'
      }
    ],
    dateCreated: '2018 - 02 - 01 30: 00: 00.000'
  }
]

对于所选语言，我需要在需要时仅显示每列的翻译文本的一个对象。（在此示例中，日期不需要以任何特定语言翻译）

以下是我如何渲染我的react-table：

constructor () {
    super()
    this.state = {
      data: translateditems
    }
  }

  render () {
    const { data } = this.state
    const headers = []
    // I use all the name fields in the first json object as headers
    for (var key in Object.keys(data[0])) {
      headers.push(Object({
        'content': Object.keys(data[0])[key]
      }))
    }

    return (
      <div>
        <ReactTable
          data={data}
          columns={headers.map(header => {
            return ({
              Header: header.content,
              accessor: header.content
            })
          })
        }
          defaultPageSize={10}
          className='-striped -highlight'
        />
        <br />
      </div>
    )
  }

你对这个怎么做有任何线索吗？

更新

以下是我为解决问题所做的工作：

return (
      <div>
        <ReactTable
          data={data}
          columns={headers.map(header => {
            return ({
              Header: header.content,
              accessor: header.content,
              // I added a function to apply on my Cell
              Cell: row => (
                <div>{this.renderTranslatedItem(data, header.content, row.index)}</div>
              )
            })
          })
          }
          defaultPageSize={10}
          className='-striped -highlight'
        />
        <br />
      </div>
    )

这是我的功能（假设lang是我想要的语言）：

renderTranslatedItem (data, column, rowIndex) {
    // I check if the value is an array -> if it's not, then I return null
    if (Object.prototype.toString.call(data[rowIndex][column]) !== '[object Array]') {
      return null;
    }
    for (var i in data[rowIndex][column]) {
      if (data[rowIndex][column][i].language === lang) {
        return data[rowIndex][column][i].content
      }
    }
  }

Answer 1

    for (var key in Object.keys(data[0])) {
    const headers = []
    // I use all the name fields in the first json object as headers
  headers.push(Object({
        'content': Object.keys(data[0])[key]
      }))
    }

在我的例子中，我认为lang是通过你的道具传递的。您必须将其替换为：

const { lang } = this.props
const headers = Object.keys(data[0]).reduce(
    (acc, key)=> {
        return key!=='id' && key!=='dateCreated' && data[0][key][lang]
        ? { ...acc, [key] : data[0][key][lang] }
        : { ...acc, [key]:null }
},{})


//console.log(headers) will output this:
{
    colonne1:'colonne1',
    colonne2:'colonne2'
}

渲染部分JSON对象

1 个答案: