javascript - 条件语句中未呈现内容

Question

所以目前我有一个 react 组件。我已经声明了一个数组，其中包含一些示例数据的一系列对象。由于“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

您需要在内容中返回您的 map 。现在你什么也没返回。例如:

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