反应返回错误解码器消息

Question

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

...

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

...

此开关应返回应根据步骤状态呈现的Component

然后渲染：

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

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

错误

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

我试图通过一些tut等来解决它。 但是我想我正在传递我做不到的事情。

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

更新：

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

UPDATE2：ImportItem组件

import React, { Component } from 'react';
import { Block } from 'vcc-ui';

class ImportStep extends Component {
  render() {
    return (
      <Block>
        <h3>{this.props}</h3>
      </Block>
    )
  }
}

export default ImportStep;

Answer 1

UPDATE

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

同样，当返回中只有一个语句时，有必要在<div>包装。

将您的this.renderStepItem()包装在<div></div> ，这应该可以。

这是您的return语句的外观，

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

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