我有一個簡單的響應組件,它傳遞一個值爲另一個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!
您是否收到任何錯誤? –
你能舉一個簡單的例子,說明如何讓DOM看起來像一個特定的輸入?我不認爲你應該在JSX中使用'React.createElement'。 –
沒有錯誤,適用的vdom看起來應該類似於' GeneralPage>' –