React类组件编写if语句遇错：render方法需返回语句求助

AI 小北

2026-5-8

解决React组件render报错及条件渲染问题

嘿，别着急，我来帮你一步步搞定这个问题～你的代码里有几个小细节问题导致了报错，咱们逐个梳理清楚：

1. 直接触发报错的核心原因

React类组件的render()方法必须返回JSX元素或者null，你现在在render里只定义了一个内部函数组件，却没有返回任何内容，这就是报错Your render method should have return statement的直接原因。

2. 其他需要修正的问题

不建议在render内部定义组件：每次组件触发render时，内部的函数组件都会被重新创建，会额外消耗性能，最好把它移到类组件外面。
props使用方式错误：你写的props.isLoggedin("True")是把属性当成方法调用了，通常isLoggedin是一个布尔值/字符串属性，直接判断它的值就行，不需要加括号调用。
export语句错误：Switch是React Router的路由组件，不能直接把你的组件当参数传入，直接导出你的组件即可。

修正后的代码示例

类组件写法

// 假设你已经定义了Welcome组件
const Welcome = () => <h1>欢迎登录！</h1>;

// 把负责条件渲染的组件移到外部
const AuthWelcome = (props) => {
  // 如果你的isLoggedin是字符串"True"，用全等判断；如果是布尔值，直接写props.isLoggedin即可
  if (props.isLoggedin === "True") {
    return <Welcome />;
  }
  return null;
};

class TEST extends React.Component {
  render() {
    // render方法必须返回内容，这里把props传递给子组件
    return <AuthWelcome isLoggedin={this.props.isLoggedin} />;
  }
}

export default TEST;

更简洁的函数组件写法（React新手更推荐）

如果是刚接触React，函数组件的写法会更简单直观：

const Welcome = () => <h1>欢迎登录！</h1>;

const TEST = (props) => {
  if (props.isLoggedin === "True") {
    return <Welcome />;
  }
  return null;
};

export default TEST;