反应返回错误解码器消息

Question

我正在尝试使用react创建非常简单的多步骤表单。我正在处理步骤状态的主要组件如下：

x <- 1:100
data.frame(x, y = floor((x- 1)/5))

这是应该返回基于步骤状态应渲染的Component的开关

然后渲染：

...

renderStepItem = () => {
switch(this.state.step) {
  case 1:
    return  <ImportStep nextStep={this.nextStep} />
  case 2:
    return  <ImportStep previousStep={this.previousStep} nextStep={this.nextStep} />
  case 3:
    return  <ImportStep previousStep={this.previousStep} />
}
}

...

问题是我收到以下错误消息：

错误

render() {
  return(
    {this.renderStepItem()}
  )
}

我正在尝试通过一些练习来解决问题。但是我猜我正在传递我做不到的事情。

有人可以给我一些提示吗？

更新：

Objects are not valid as a React child (found: object with keys {nextStep}).

UPDATE2：ImportItem组件

render() {

    const importSteps = AppConfig.importSteps;

    return (
      <Block extend={{
        width: '80%',
        margin: '25px auto'
      }}>
        <TabNav extend={{
          border: '1px solid black',
        }}
          textAlign='center'>
          {Object.keys(importSteps).map(function(key) {
            return <TabNavItem >{importSteps[key].name} {importSteps[key].stepNo}</TabNavItem>;
          }
          )}
        </TabNav>
        <div>{ this.renderStepItem() }</div>
      </Block>
    )
  }
}

Answer 1

更新

在渲染功能中使用this.props.property。您不能在object组件中使用ImportStep。

此外，当返回中仅包含一条语句时，有必要在<div>中进行换行。

将您的this.renderStepItem()包裹在<div></div>内，这样就可以了。

这是您的return语句的样子，

return (
  <div>{ this.renderStepItem() }</div>
)

请参见以下示例：https://codesandbox.io/s/q35699jj49