如何传递道具以反应包裹在变量中的组件

Question

我想动态呈现表格单元格。每个单元都是一个React组件。我试图将这些React组件导出为包装函数。

例如：

import cellA from './cellA'
import cellB from './cellB'
import cellC from './cellC'

let content = { cellA, cellB, cellC }

function tableize (a) {
    let resultFn = {}
    Object.keys(a).forEach((k) => {
        let element = a[k]
        resultFn[k] = function (data) {
            return (<element data={data} />)
        }
    })
    return resultFn
}

export default tableize(content)

问题在这条线上：

return (<element data={data} />)

结果是命名为element的React组件的浏览器渲染列表，而不是cellA，cellB，cellC。函数返回元素为jsx（在</>标记中），因为我需要将prop传递给这些React组件。但是我错了。

如何将props传递给包裹在变量中的这个React组件？

谢谢！

Answer 1

尝试这个：

function tableize (a) {
    let resultFn = {}
    Object.keys(a).forEach((k) => {
        // Uppercase "E" from Element
        let Element = a[k]
        resultFn[k] = function (data) {
            // Uppercase "E" from Element
            return (<Element data={data} />)
        }
    })
    return resultFn
}