Javascript 如何将道具传递给封装在变量中的组件

我想动态呈现表格单元格。每个细胞都是一个反应组分。我正在尝试将这些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)

从“/cellA”导入cellA
从“./cellB”导入cellB
从“./cellC”导入cellC
let content={cellA，cellB，cellC}
函数表化（a）{
设resultFn={}
Object.keys（a.forEach）（k）=>{
设元素=a[k]
resultFn[k]=函数（数据）{
返回（）
}
})
返回结果n
}
导出默认表格（内容）

问题出在这一行：

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

return（）

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

如何将道具传递给这个封装在变量中的React组件

---

谢谢大家!

看起来您需要的是高阶组件（HOC）

函数包装器（WrappedComponent）{
返回类扩展了React.Component{
render（）{
//将输入组件包装在容器中，而不会对其进行变异。很好！
返回；
}
}
}

请阅读此

尝试以下内容：

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
}

函数表化（a）{
设resultFn={}
Object.keys（a.forEach）（k）=>{
//来自元素的大写字母“E”
设元素=a[k]
resultFn[k]=函数（数据）{
//来自元素的大写字母“E”
返回（）
}
})
返回结果n
}

数据从哪里来？您没有将数据作为参数放入

函数tableze（a）

如果您只使用

，它是否工作？react将以小写开头的组件视为标准内置组件，例如

或

。因此，在您的情况下，它认为您要渲染

。如果要呈现自定义生成的组件，则需要以大写字母（包括变量名）开头。因此，上面的代码。

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
}