React使用枚举实现条件渲染遇this指向错误求助

首先，你的枚举式条件渲染思路是完全可行的！报错的核心是两个小细节问题：this指向错误和动态属性访问语法错误，咱们一步步来解决：

1. 修复this指向问题 #

你在render里定义的onLinkClick是普通函数，在React的严格模式下，它内部的this默认是undefined，自然没法访问组件的this.state。解决方法有两种：

方法一：把onLinkClick改成箭头函数 #

箭头函数会自动继承外层作用域的this（也就是App组件的实例），这样就能正常访问this.state了：

render() {
  // 改成箭头函数
  const onLinkClick = (link) => {
    const WEB_PAGES = {
      home: <Home x={this.state.x} />,
      new: <NewPost />,
      settings: <Settings />,
      signup: <SignUp />,
      login: <Login />
    };
    return <div>{WEB_PAGES[link]}</div>; // 注意这里的属性访问语法！
  };

  return (
    <div>
      <Nav y={this.state.y} z={this.state.z} />
      {onLinkClick(this.state.lastClickedLink)}
    </div>
  );
}

方法二：调用函数时绑定this #

如果坚持用普通函数，可以在调用的时候用call或bind绑定组件实例的this：

render() {
  function onLinkClick(link) {
    const WEB_PAGES = {
      home: <Home x={this.state.x} />,
      new: <NewPost />,
      settings: <Settings />,
      signup: <SignUp />,
      login: <Login />
    };
    return <div>{WEB_PAGES[link]}</div>;
  }

  return (
    <div>
      <Nav y={this.state.y} z={this.state.z} />
      {/* 用call绑定组件的this */}
      {onLinkClick.call(this, this.state.lastClickedLink)}
    </div>
  );
}

2. 修复动态属性访问的语法错误 #

你原来写的WEB_PAGES.link是在访问名为link的字面量属性，而不是变量link对应的属性，必须用方括号语法WEB_PAGES[link]才能动态访问对象属性——这也是你即使修复this后可能看不到页面的隐藏问题。

3. 优化枚举方案 #

为了避免每次render都重新创建WEB_PAGES对象，你可以把它移到组件类的外面（如果不需要访问组件状态），或者拆分出基础部分：

// 把不需要访问state的组件移到外面，复用性更好
const WEB_PAGES_BASE = {
  new: <NewPost />,
  settings: <Settings />,
  signup: <SignUp />,
  login: <Login />
};

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      x: ...,
      y: ...,
      z: ...,
      lastClickedLink: 'home'
    }
  }

  render() {
    const onLinkClick = (link) => {
      // 合并基础组件和需要访问state的组件
      const WEB_PAGES = {
        ...WEB_PAGES_BASE,
        home: <Home x={this.state.x} />
      };
      return <div>{WEB_PAGES[link]}</div>;
    };

    return (
      <div>
        <Nav y={this.state.y} z={this.state.z} />
        {onLinkClick(this.state.lastClickedLink)}
      </div>
    );
  }
}

适合新手的替代方案 #

如果你觉得枚举式的写法还是有点绕，还有两种更直观的方案：

方案一：Switch-Case 语句 #

逻辑清晰，新手更容易理解和调试：

renderPage() {
  const { lastClickedLink, x } = this.state;
  switch(lastClickedLink) {
    case 'home':
      return <Home x={x} />;
    case 'new':
      return <NewPost />;
    case 'settings':
      return <Settings />;
    case 'signup':
      return <SignUp />;
    case 'login':
      return <Login />;
    default:
      return <Home x={x} />; // 默认显示首页
  }
}

render() {
  return (
    <div>
      <Nav y={this.state.y} z={this.state.z} />
      {this.renderPage()}
    </div>
  );
}

方案二：React Router（推荐长期方案） #

如果你的项目页面较多，后续还要处理路由跳转、URL同步等需求，直接用React Router会更专业，它本质上是一种更强大的"枚举式渲染"，还能帮你管理路由状态：

// 先安装依赖：npm install react-router-dom
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

class App extends Component {
  // 你的state和其他逻辑...

  render() {
    return (
      <Router>
        <Nav y={this.state.y} z={this.state.z} />
        {/* Nav里的跳转链接可以改成<Link to="/home">Home</Link>这种形式 */}
        <Routes>
          <Route path="/home" element={<Home x={this.state.x} />} />
          <Route path="/new" element={<NewPost />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/signup" element={<SignUp />} />
          <Route path="/login" element={<Login />} />
          <Route path="/" element={<Home x={this.state.x} />} /> {/* 默认路由 */}
        </Routes>
      </Router>
    );
  }
}

内容的提问来源于stack exchange，提问作者Christina W.