Question

我有一个创建无序列表的功能

export const functionToCreateMarkup = (data) => {
  var list = document.createElement('ul')
  let labels = {Data1: 'Data 1 name',
    Data2: 'Data 2 name',
    Data3: 'Data 3 name'}
  data.split(' ').map((data) => {
    var item = document.createElement('li')
    item.appendChild(document.createTextNode(labels[data]))
    list.appendChild(item)
  })
  return list
}

此数据正在与COLUMNS一起使用的表中

COLUMNS = [{}, {}, {
    header: 'Col Name',
    formatter: (value, rowNum, data) => {
      return functionToCreateMarkup(value)
    }
  }]

，这在React的Table组件中使用。但是我想我没有返回正确的值。我收到错误

Objects are not valid as a React child (found: object with keys {list}). If you meant to render a collection of children, use an array instead.

如何返回正确的标记

Answer 1

您无法在反应中打印对象你应该做这样的事情

import React from 'react'
export const functionToCreateMarkup = data => {    
    const labels = {
        Data1: 'Data 1 name',
        Data2: 'Data 2 name',
        Data3: 'Data 3 name'
    }
    return (
        < ul >
            {data.split(' ').map((data, index) => <li key={index}>{labels[data]}</li>)}
        </ul >
    )
}

您不需要VanillaJS在react中创建html节点

返回标记的react函数无法正确显示

1 个答案: