Question

好吧，我只是从React开始，所以我陷入了一些愚蠢的问题。我想检查currentPage语句并呈现相关组件。我使用变量而不是语句时还可以。我认为我无法理解一些基本知识

  class Main extends Component {
  render() {
  function MainNavBar //code     
  function setCurrentPageState //code

  this.state = {
      currentPage : 'home'
  };

  function ActivePage() {

      if (this.state.currentPage == 'home'){
          return <HomePage />
      }
      //Other if statements
  }

return (
  <div className="app">
      <MainNavBar />
      <ActivePage/>
  </div>
);
}
}

Answer 1

您在某些方面错了，请尝试以下操作：

class Main extends Component {
  contructor(props){
    this.state = {
      currentPage : 'home'
    };
    this.setCurrentPageState = this.setCurrentPageState.bind(this);
  }
  renderActivePage() {
    if (this.state.currentPage == 'home'){
      return <HomePage />
    }
    //Other if statements
  }
  renderMainNavBar() {
    return <MainNavBar />
  }
  setCurrentPageState() {
    this.setState({currentPage: 'newPage'})
  }
  render() {
    return (
      <div className="app">
        {this.renderMainNavBar()}
        {this.renderActivePage()}
      </div>
    );
  }
}

您应该在组件state中初始化constructor，然后使用this.setState进行设置。试试吧，祝你好运。

Answer 2

似乎代码结构不正确，您的问题对我也不明确。我的一些建议：

*。移动this.state = { currentPage : 'home' }; 内部构造函数（）{}

*。使用'==='而不是==这会在此处more info检查相等的值和相等的类型 *。请仔细阅读https://reactjs.org/docs/hello-world.html文档，以使语法清晰明了。

无法检查“如果”状态后的渲染组件

2 个答案: