2016-04-26 71 views
0

我有一個簡單的響應組件,它傳遞一個值爲另一個React組件的對象數組,如下所示(並且我知道這可以轉換爲功能組件,但對於這個問題無關緊要):React createElement子句的語法

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!

+0

您是否收到任何錯誤? –

+0

你能舉一個簡單的例子,說明如何讓DOM看起來像一個特定的輸入?我不認爲你應該在JSX中使用'React.createElement'。 –

+0

沒有錯誤,適用的vdom看起來應該類似於'' –

回答

2

嘗試改變

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

你會得到它作爲你的腳步道具.node

+0

這樣做一般可行,但並不能解決獲得所需孩子的問題。它基本上是另一種方式來給我我現在的東西。 –

+0

所以你想添加WizardButtons到元素?通過它作爲道具。 – QoP

+0

道具的工作原理,但所有的步驟組件必須進行修改來渲染它,這就是爲什麼我試圖使它成爲一個孩子,而不是道具。我可以解決這個問題,但不接受答案(儘管我標記它有用),希望有人會用一種可行的兒童解決方案加以解決。 –

0

好感謝@QoP指着我在正確的方向,我能終於想出解決辦法...

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

即通過按鈕作爲子節點和步驟節點中的this.props.children顯示它們。