如何传递道具来反应变量包裹的组件 [英] How to pass props to react component that wrapped in variable

问题描述

我想动态渲染表格单元格。每个单元格都是React组件。我正在尝试将这些React组件导出为包装函数。

I want to render table cell dynamically. Each cell is a React component. I'm trying to export these React components as a wrap function.

例如：

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} />)

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

The result is browser render list of React components named element, not cellA, cellB, cellC. The function return element as jsx (in < /> tag) because I need to pass props to these React component. But I'm wrong.

如何将道具传递给包含在变量中的这个React组件？

How to pass props to this React component that wrapped in a variable?

谢谢！

推荐答案

试试这个：

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
}

这篇关于如何传递道具来反应变量包裹的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！