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

结果是名为元素的React组件的浏览器呈现列表，而不是 cellA ， cellB ， cellC 。函数将元素作为jsx（在＆lt; /＆gt;标记中）返回，因为我需要将props传递给这些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
}

Answer 2

看起来你想要的是一个更高阶的组件（HOC）

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

请阅读此https://facebook.github.io/react/docs/higher-order-components.html

如何传递道具来反应变量包裹的组件

2 个答案: