React中函数内JSX组件出现未确定JSX内容错误，附切换组件代码

嘿，我帮你找出问题啦！你遇到的“undetermined JSX contents”错误主要是JSX标签未正确闭合导致的，另外还有几个小细节需要调整，来看具体方案：

1. 核心错误：JSX标签未完整闭合 #

你的render方法里，return的JSX结构最后一个<div>没有闭合，整个嵌套结构也没写完——JSX对标签闭合的要求很严格，就像XHTML规范一样，未闭合的标签会直接触发“undetermined JSX contents”错误。

2. 次要问题：方法的this绑定缺失 #

toggleHidden方法里调用了this.setState，但如果不提前绑定this，点击切换按钮时this会指向undefined，导致 setState 调用失败。

3. 补充：子组件代码不完整 #

你写的DateEditComponent标签没有闭合，需要补全完整的JSX结构。

修复后的完整代码 #

import React, { Component } from 'react';

// 先定义子组件（确保在父组件之前定义，避免引用错误）
const DateNormalComponent = () => (
  <div>这是普通日期展示组件</div>
);

const DateEditComponent = () => (
  <div>这是可编辑日期组件</div>
);

class DateComponent extends Component {
  constructor () {
    super();
    this.state = { isHidden: true };
    // 绑定this到toggleHidden方法，确保调用时this指向组件实例
    this.toggleHidden = this.toggleHidden.bind(this);
  }

  toggleHidden () {
    this.setState({ isHidden: !this.state.isHidden });
  }

  render () {
    return (
      <div>
        {/* 条件渲染两个组件，可省略不必要的外层div */}
        {this.state.isHidden && <DateNormalComponent />}
        {!this.state.isHidden && <DateEditComponent />}
        {/* 添加切换按钮，触发状态变更 */}
        <button onClick={this.toggleHidden}>
          {this.state.isHidden ? '切换到编辑模式' : '切换到普通模式'}
        </button>
      </div>
    );
  }
}

export default DateComponent;

额外优化小建议 #

你可以用三元运算符简化条件渲染逻辑，让代码更直观：

{this.state.isHidden ? <DateNormalComponent /> : <DateEditComponent />}

这种写法能明确表达“二选一”的渲染逻辑，也避免了极端情况下两个组件都不渲染的可能（虽然你的原写法也没问题，但三元更清晰）。

内容的提问来源于stack exchange，提问作者Sim