javascript - React createElement 子级语法

Question

我有一个简单的 react 组件，它传递一组具有一个值的对象数组，该值是另一个 react 组件，如下所示(是的，我知道这可以转换为功能组件，但这对于这个问题来说并不重要):

import React, { Component } from 'react'
import GeneralPage from 'AdminApp/client/components/conference/GeneralPage'
import TopicPage from 'AdminApp/client/components/conference/TopicPage'
import NewPage from 'common/client/components/wizard/NewPage'

export default class TestWizard extends Component {

  render() {
    let steps=[
      {name: "One", node: GeneralPage},
      {name: "Two", node: TopicPage},
      {name: "Three", node: TopicPage},
    ]
    return (
      <NewPage steps={steps} name='Conference'/>
    )
  }
}

这在另一个组件中，恰好被包装在一个单独的 HOC 中，但 HOC 与这个问题无关，我正在创建从上面传入的组件 - React.createElement(step.node) 在下面的代码中:

import React, { Component, PropTypes } from 'react'
import {NewWrapper} from 'common/client/components/wizard/NewWrapper'
import WizardButtons from 'common/client/components/wizard/WizardButtons'
import { bindActionCreators } from 'redux'
import CONSTANTS from 'common/client/constants'

let NewPage = NewWrapper(class extends Component {
  render() {
    const {steps, page, name} = this.props
    let stepCount = steps.length
    let stepName = steps[page - 1].name
    let submit = steps[page - 1].submit
    let stepPreText = `${name}`
    let stepPostText = ` Wizard - ${stepName} (Step ${page} of ${stepCount})`
    //TODO: select with steps - if ID and/or valid?
    let title = <div><h2 style={{textAlign: 'center', color: CONSTANTS.EP_COLOR_BROWN}}>
      {name && stepPreText}{stepCount > 1 && stepPostText}
    </h2></div>

    return (
      <div>
        {page}
        {steps.map((step, index) =>
          <div key={index}>
            {page === (index + 1) ? title : null}
            {/* ***HERE IS WHERE THE NODES ARE ADDED *** */}
            {page === (index + 1) ? React.createElement(step.node) : null}
          </div>
        )}
        {/* ***I NEED TO ADD THIS AS A CHILD TO THE createElement *** */}
        <WizardButtons submit={submit} {...this.props}/>
      </div>
    )
  }
})

export default NewPage

我需要做但似乎不知道如何添加 <Wizard Buttons/>上面的元素作为 createElement 的子元素。我厌倦了像 React.createElement(step.node, null, <WizardButtons submit={submit} {...this.props}/>) 这样的事情并使用向导按钮元素创建一个变量，并将该变量作为第三个参数传递给 creatElement，但似乎没有任何效果。关于如何最好地做到这一点有什么想法吗？

TIA!

Answer 1

尝试改变

let steps=[
  {name: "One", node: GeneralPage},
  {name: "Two", node: TopicPage},
  {name: "Three", node: TopicPage},
]

至

let steps=[
      {name: "One", node: <GeneralPage />},
      {name: "Two", node: <TopicPage />},
      {name: "Three", node: <TopicPage />},
    ]

还有这个

 {page === (index + 1) ? React.createElement(step.node) : null}

至

 {page === (index + 1) ? step.node : null}

编辑以将按钮添加到step.node

要将向导按钮添加到 step.node ...您可以做一些事情

let wizardButton = <WizardButtons submit={submit} {...this.props}/>
React.cloneElement(step.node, {wizardButton : wizardButton});

您将把它作为您的 step.node 中的 Prop