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

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

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(...)，那么您应该会得到期望的结果。

内容未在条件语句中呈现

2 个答案: