ReactJS：使用枚举的条件渲染

Posted 2023-02-22

【中文标题】ReactJS：使用枚举的条件渲染

【英文标题】：ReactJS: Conditional Rendering using Enums

【发布时间】：2018-10-19 02:34:43

【问题描述】：

我对 React 有点陌生，一直在练习使用this article 中指定的枚举渲染方法创建应用程序。

但是，我正在尝试以与本文所讨论的方式略有不同的方式应用它，更具体地说，使用它来有条件地呈现我的所有网站，除了基于lastLinkClicked 状态的<Nav />。对于 WEB_PAGES 对象中列出的每个条件，我都有不同的页面类。

也许我误解了这种方法，因为我对枚举没有太多经验，但我的页面没有正确呈现。这是我的代码：

class App extends Component 
  constructor(props)
    super(props);

    this.state = 
      x: ...
      y: ...
      z: ...
      lastClickedLink: 'home' //changes to 'new', 'settings', etc. using another function not listed here
    
  


  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
        />
      onLinkClick(this.state.lastClickedLink)
    </div>
    );
  


export default App;

为简洁起见，我删除了一些代码。我在此设置中遇到的错误是TypeError: Cannot read property 'state' of undefined for home 在 WEB_PAGES 对象下。

我最初认为this 指向 WEB_PAGES 对象，但将this 更改为App 表明state 也未定义。我现在不确定该怎么做。

枚举条件渲染方法在这种规模上是否可行？如果不是，还有什么其他方法最适合这种情况？非常感谢！

【问题讨论】：

使用立即调用函数。

请检查代码并将语句从 WEB_PAGES.link 替换为 WEB_PAGES[link]

WEB_PAGES[link] 成功了，谢谢！

【参考方案1】：

在 javascript 中，当您使用 function 关键字创建函数时，它会创建自己的新范围并创建默认对象 this。因此，当您尝试访问 this.state.x 时，它不会在函数内声明属性。变成this.undefined.x。所以它给出了错误。

而箭头函数(() => ) 不会创建此对象，而是创建内部范围。

在您的代码中尝试以下渲染方法：

render() 
    return (
    <div>
        <Nav
        y=this.state.y
        z=this.state.z
        />
        ((link) => 
            const WEB_PAGES = 
            home: <Home
                    x=this.state.x
                />,
            new: <NewPost />,
            settings: <Settings />,
            signup: <SignUp />,
            login: <Login />
            ;
            return (
                <div>
                WEB_PAGES[link]
                </div>
            );
        )(this.state.lastClickedLink)
    </div>
    );

【讨论】：

消除了错误，但现在我渲染的只是导航，没有 WEB_PAGE 对象中的任何内容。

我觉得应该是<div>link</div>?

试试这个WEB_PAGES[link]

@ChristinaW。保持之前的代码不变，但尝试使用语句 WEB_PAGES[link] 而不是 WEB_PAGES.link

@ShubhamBatra 你能解释一下，为什么她的状态是未定义的？

【参考方案2】：

当你尝试使用. 时使用WEB_PAGES[link] 它将不起作用

【参考方案3】：

const Link = ( lastClickedLink ) => 
  const WEB_PAGES = 
    home: <Home x=lastClickedLink />,
    new: <NewPost />,
    settings: <Settings />,
    signup: <SignUp />,
    login: <Login />
  ;
  return (
    <div>
      WEB_PAGES[link]
    </div>
  );


render() 
  return (
    <div>
      <Nav
        y=this.state.y
        z=this.state.z
      />
      <Link lastClickedLink=this.state.lastClickedLink />
    </div>
  );

此变体具有更高的可读性和可扩展性。基于 Shubham Batra 示例。

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。