如何傳遞道具來反應變量包裹的組件

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（在</>標簽中），因為我需要將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