ReactJS：使用枚举进行条件渲染

Question

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

但是，我尝试以与文章中提到的略有不同的方式应用它，更具体地说，使用它有条件地呈现我的所有网站，除了基于 [=12] 的 <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;

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

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

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

Answer 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>
    );
}

Answer 2

当您尝试使用 . 时使用 {WEB_PAGES[link]} 它不会起作用

Answer 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={lastClickedLink} />
        </div>
      );
    }

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

ReactJS：使用枚举进行条件渲染

ReactJS: Conditional Rendering using Enums

javascript

reactjs

enums

jsx

conditional-rendering