React createElement子句的语法

我有一个简单的响应组件，它传递一个值为另一个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！

来源

2016-04-26 D Durham

您是否收到任何错误？ –

你能举一个简单的例子，说明如何让DOM看起来像一个特定的输入？我不认为你应该在JSX中使用'React.createElement'。 –

没有错误，适用的vdom看起来应该类似于'' –

尝试改变

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

来源

2016-04-26 03:35:23 QoP

这样做一般可行，但并不能解决获得所需孩子的问题。它基本上是另一种方式来给我我现在的东西。 –

所以你想添加WizardButtons到元素？通过它作为道具。 – QoP

道具的工作原理，但所有的步骤组件必须进行修改来渲染它，这就是为什么我试图使它成为一个孩子，而不是道具。我可以解决这个问题，但不接受答案（尽管我标记它有用），希望有人会用一种可行的儿童解决方案加以解决。 –

好感谢@QoP指着我在正确的方向，我能终于想出解决办法...

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

即通过按钮作为子节点和步骤节点中的this.props.children显示它们。

来源

2016-04-26 05:31:25

React createElement子句的语法

回答

相关问题