IT技术 - 如何将props传递给包装在变量中的react组件 - 吾爱随笔录

我想动态呈现表格单元格。每个单元格都是一个 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（在 < /> 标签中），因为我需要将 props 传递给这些 React 组件。但我错了。

如何将props传递给这个包装在变量中的 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 }

function wrapper(WrappedComponent) { return class extends React.Component { render() { // Wraps the input component in a container, without mutating it. Good! return <WrappedComponent {...this.props} />; } } }