如何在React中创建页面

Question

I am creating a really simple app in react. It will have a number of pages with minimum data on it. I am looking for the simplest method to switch between the pages with as little complexities as possible.

This is my current code:

render() {
    return (
        <div className="App test">
        <nav className="navbar pure-menu pure-menu-horizontal">
          <a href="#" className="pure-menu-heading pure-menu-link">
             Page 1
          </a>
          {
          }<ul className="pure-menu-list">
              <li className="pure-menu-item"><a href="#" className="pure-menu-link">Page 2</a></li>
              <li className="pure-menu-item"><a href="#" className="pure-menu-link">Page 3</a></li>
              <li className="pure-menu-item"><a href="#" className="pure-menu-link">Page 4</a></li>
              </ul>
          }
          </nav>
          <main className="container">
              <div className="pure-g">
                <div className="pure-u-1-1">
                  <p>
                    Page 1 text
                  </p>
                  <p>
                    Page 2 text
                  </p>
                  <p>
                    Page 3 text
                  </p>                      
                  <p>
                    Page 4 text
                  </p>

                </div>
              </div>
          </main>
        </div>);
  }
}

Is there a standard to switch between the content? (Page text 1,2,3,4).

Answer 1

How simple? :). Simplest method possible would be to hold a pageNumber state in your component and only render a particular page when it is that number. Call setPageNumber with a parameter to see the component render different pages.

This is obviously not the best solution or scalable.

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            pageNumber: 0
        };
    }
    onClickLink = (pageNumber) => {
        this.setState({ pageNumber });
    }
    render() {
        <div className="pure-u-1-1">
            {this.state.pageNumber === 0 ? <p></p> : null}
            {this.state.pageNumber === 1 ? <p></p> : null}
            {this.state.pageNumber === 2 ? <p></p> : null}
            {this.state.pageNumber === 3 ? <p></p> : null}
        </div>
    }
}

Answer 2

The better way is to add onClickLink function to the link of pages, and put all your pages in an array, and in the place where you want it to be have something like this:

    onClickLink = (pageNumber, event) => {
            this.setState({ pageNumber });
        }

    render() {
            <ul className="pure-menu-list">
                <li className="pure-menu-item"><a href="#" className="pure-menu-link" onClick=onClickLink.bind(null, 2)>Page 2</a></li>
             </ul>


            <div className="pure-u-1-1">
                <p>arrayOfPageComponents[this.state.pageNumber]</p>
            </div>
        }

So the function is bound to the link with the value of page number (in my example 2), when it's called, it's called with 2, so state will be changed to 2, this change will be detected by React and the component will be re-rendered, now reading 2nd value from the array of pages.