Javascript 不在条件语句中呈现内容

所以现在我有一个react组件。我声明了一个数组，其中包含一些示例数据的一系列对象。由于“currentStep”的初始状态为0，我希望

屏幕1

能够呈现，但是，我得到的只是一个空白屏幕

有什么想法吗

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;

import React，{Component}来自'React'；
/**
*要传递的示例数据
*/
常量内容=
[
{标题：“第一个屏幕”，步骤：0，子屏幕：屏幕1}，
{标题：“第二屏”，步骤：1，子屏：2}，
{标题：“第三屏”，步骤：2，子屏幕：3}，
];
类向导扩展组件{
状态={
当前步骤：0，
}
内容=（）=>{
const{currentStep}=this.state；
contents.map（（content）=>{
if（content.step==currentStep）{return content.children；}
返回null；
});
}
render（）{
返回(
{this.Content（）}
);
}
}
导出默认向导；

您需要返回内容中的地图。现在你什么也不退。例如：

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

---

您需要返回内容中的地图。现在你什么也不退。例如：

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

---

您的

Content

函数实际上并没有返回任何内容，但是您的map函数返回了任何内容。如果你

返回contents.map（…）

，那么你应该得到你想要的。

你的

Content

函数实际上没有返回任何东西，但是你的map函数是。如果您

返回contents.map（…）

，那么您应该会得到您期望的结果。

您是否尝试过console.log（this.Content（））？控制台中有任何错误消息吗？您是否尝试了console.log（this.Content（））？控制台中有错误消息吗？添加了返回到contents.map前面，现在可以工作了：Dadded返回到contents.map前面，现在可以工作了：D