Reagieren createElement Kinder Syntax

Question

Ich habe eine einfache Reaktionskomponente, die ein Array von Objekten mit einem Wert, der eine andere React-Komponente wie folgt ist (und ja, ich weiß, dass dies in eine funktionale Komponente umgewandelt werden kann, aber das ist nicht wichtig für diese Frage):

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

Dies in einer anderen Komponente, die in einem separaten HOC gewickelt werden passiert, aber das HOC ist auf diese Frage nicht relevant, ich die Komponenten von oben geführt erschaffe - React.createElement (step.node) im folgenden Code:

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 

Was ich tun muss und nicht herausfinden kann, wie das Element <Wizard Buttons/> oben als Kind des createElement hinzugefügt werden soll. Ich habe Dinge wie React.createElement(step.node, null, <WizardButtons submit={submit} {...this.props}/>) müde gemacht und eine Variable mit dem Element wizard buttons erstellt und diese Variable als dritten Parameter an das createElement übergeben, aber nichts scheint zu funktionieren. Irgendwelche Ideen, wie man das am besten macht?

TIA!

Answer 1

Try

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

zu

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

und diese

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

zu

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

Ändern

Edited die Schaltfläche, um in den step.node

den Assistenten Schaltfläche Hinzufügen ... step.node Sie

etwas tun konnte

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

Sie es in Ihrem Schritt als Stütze bekommen .Node

Answer 2

Ok dank @QoP mich in die richtige Richtung, konnte ich endlich das herauszufinden ...

let wizardButtons = <WizardButtons submit={submit} {...this.props}/> 
{page === (index + 1) ? React.createElement(step.node, {...this.props}, wizardButtons) : null 

, dass die Tasten als übergibt child an jeden step-Knoten und this.props.children in den step-Knoten zeigt sie an.