内容未在条件语句中呈现

Question

所以目前我有一个反应成分。 我声明了一个数组，其中包含一些样本数据的一系列对象。 由于“ currentStep”的初始状态为0，因此我希望呈现<div>Screen 1</div> ，但是，我得到的只是一个空白屏幕。

有任何想法吗？

import React, { Component } from 'react';

/**
 * sample data to pass through
 */

const contents =
  [
    { title: 'First Screen', step: 0, children: <div>Screen 1</div> },
    { title: 'Second Screen', step: 1, children: <div>Screen 2</div> },
    { title: 'Third Screen', step: 2, children: <div>Screen 3</div> },
  ];

class Wizard extends Component {
  state = {
    currentStep: 0,
  }

  Content = () => {
    const { currentStep } = this.state;
    contents.map((content) => {
      if (content.step === currentStep) { return content.children; }
      return null;
    });
  }

  render() {
    return (
      <div>{this.Content()}</div>     
    );
  }
}

export default Wizard;

Answer 1

您需要在“内容”中返回地图。 现在，您什么也没返回。 例如：

Content = () => {
  const { currentStep } = this.state;
  return contents.map((content) => {
    if (content.step === currentStep) { return content.children; }
    return null;
  });
}

Answer 2

您的Content函数实际上并没有返回任何东西，但是map函数却返回了。 如果return contents.map(...) ，那么您应该得到期望的结果。