javascript - React 返回错误解码器消息

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

...

这是应该返回应根据步骤状态呈现的组件的开关

然后渲染:

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

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

错误

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

我试图通过一些尝试来解决它。但我猜我正在传递一些我无法做到的事情。

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

更新:

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

更新2: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

更新

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

此外，包裹在 <div> 内当您的返回中只有一条语句时，这是必要的。

包裹你的this.renderStepItem()里面 <div></div> ，这应该可以。

您的返回声明应如下所示，

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

请参阅此示例:https://codesandbox.io/s/q35699jj49