我的if语句在做什么？

Question

I'm porting a website I had build already for another project into React and wanted to set a state for my navbar and was trying to set up my conditionals to render my pages first but it keeps throwing syntax error

I tried changing the {} enclosing to if to () to see if that did anything. I also tried wrapping my if inside {()} and nothing

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  render() {
    return (
      <div>
        <NavBar />
        {if (this.state.page === 1) {
          return (<Products />)
        } else if(this.state.page === 2) {
          return (<Contact />)
        } else {
          <Landing />
        }}
        <Footer />
      </div>
    );
  }
}

Answer 1

Doesn't matter with the bracket, you can try this:

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  renderContent() {
    if (this.state.page === 1) {
      return <Products />;
    } else if(this.state.page === 2) {
      return <Contact />;
    } else {
      return <Landing />;
    }
  }

  render() {
    return (
      <div>
        <NavBar />
        {this.renderContent()}
        <Footer />
      </div>
    );
  }
}

Answer 2

您应该使用条件渲染，例如

{this.state.page === 1 ? <Products /> : this.state.page === 2 ? <Contact /> : <Landing />}

Answer 3

Another way to approach this would be:

  render() {
    const { page } = this.state;

    return (
      <div>
        <NavBar />
        { (page === 1) && <Products /> }
        { (page === 2) && <Contact /> }
        { (page !== 1 && page !== 2 ) && <Landing /> }
        <Footer />
      </div>
    );
  }

Answer 4

The easiest way for this is like this:

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  render() {
    const { page } = this.state;

    return (
      <div>
        <NavBar />
        {page === 1 && <Products />}
        {page === 2 && <Contact />}
        {page !== 1 && page !== 2 &&
          <Landing />
        }
        <Footer />
      </div>
    );
  }
}

Answer 5

One alternate way is to use a mapper object and default value

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  renderContent(val) {
    let obj = {
      1: Products,
      2: Contact,
    }
    return obj[val] || Landing
  }

  render() {
    let Component = this.renderContent(this.state.page)
    return (
      <div>
        <NavBar />
          <Component />
        <Footer />
      </div>
    );
  }
}

Answer 6

Here is a quick demo

 function NavBar() { return <h1>Hello Navbar</h1>; } function Footer() { return <h1>Hello, Footer</h1>; } function Landing() { return <h1>Hello, Landing</h1>; } function Contact() { return <h1>Hello, Contact</h1>; } function Products() { return <h1>Hello, Products</h1>; } class App extends React.Component { state = { page: 1, } setPageChange = () => { setState({ page: props.key }) } renderContent() { if (this.state.page === 1) { return <Products />; } else if(this.state.page === 2) { return <Contact />; } else { return <Landing />; } } render() { return ( <div> <NavBar /> {this.renderContent()} <Footer /> </div> ); } } ReactDOM.render(<App />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>