React.js render có điều kiện

React.js render có điều kiện

• Trong React, chúng ta có thể tạo nhiều component khác nhau, khi đó có thể render bất kỳ component nào ta muốn, bằng cách sử dụng điều kiện tại phần render.
• Cách sử dụng câu điều kiện (câu điều kiện if else) tại phần render giống như cách sử dụng trong Javascript, React sẽ dựa vào câu điều kiện để tạo thành phần đại diện cho State hiện tại, sau đó sẽ dựa vào setState để cập nhập lại giao diện.
• Xem ví dụ bên dưới để hiểu rõ thêm nhé.

Ví dụ về render có điều kiện

Chúng ta sẽ tạo một ứng dụng sao cho:

• Nếu chưa login (hoặc logout) thì sẽ hiển thị “Please sign in”.
• Nếu đã login thì sẽ hiển thị “Welcome back!”.

Ta lần lượt thực hiện các bước sau:

• Tạo 2 component UserGreeting (hiển thị nội dung khi login) và GuestGreeting (hiển thị nội dung khi chưa login hoặc logout).
• Tạo 1 function Greeting điều khiển 2 component User và Guess tuy theo điều kiện user có login hay không.
• Tạo 2 component hiện thị nội dung cho button: LogoutButton khi đã login và LoginButton khi chưa login hoặc logout.
• Tạo 2 function handleLoginClick và handleLogoutClick để xử lý click button.
• Việc còn lại cuối cùng là tiến hành xử lý câu điều kiện bên trong phần render để trả đúng trạng thái user có login hay không.

2 component UserGreeting và Guestbook

Nội dung 2 component này chỉ đơn giản xuất ra 2 câu thông báo.

const UserGreeting = (props) => {
  return <h2>Welcome back!</h2>;
}
const GuestGreeting = (props) => {
  return <h2>Please sign in.</h2>;
}

Function Greeting

Nội dung function này lọc điều kiện login:

• Nếu login thì trả về component UserGreeting
• Nếu chưa login hoặc logout thì trả về component GuestGreeting..

const Greeting = (props) => {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

2 component LoginButton và LogoutButton

Nội dung 2 component này dùng để điều khiển hiển thị của button: nếu là login thì button sẽ hiển thị Logout và ngược lại.

const LoginButton = (props) => {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}
const LogoutButton = (props) => {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

2 function handleLoginClick và handleLogoutClick

Nội dung 2 function này sử dụng setState để cập nhật trạng thái login hay logout.

handleLoginClick = () => {
  this.setState({isLoggedIn: true});
}
handleLogoutClick = () => {
  this.setState({isLoggedIn: false});
}

Kết quả cuối cùng ta được như sau:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class LoginControl extends React.Component {
        constructor(props) {
          super(props);
          this.state = {isLoggedIn: false};
        };
        handleLoginClick = () => {
          this.setState({isLoggedIn: true});
        };
        handleLogoutClick = () => {
          this.setState({isLoggedIn: false});
        };
        render() {
          const isLoggedIn = this.state.isLoggedIn;
          let button; /* Khai báo biến button sử dụng cho if */
          if (isLoggedIn) {
            button = <LogoutButton onClick={this.handleLogoutClick} />;
          } else {
            button = <LoginButton onClick={this.handleLoginClick} />;
          }
          return (
            <div>
              <Greeting isLoggedIn={isLoggedIn} />
              {button}
            </div>
          );
        };
      };
      const UserGreeting = (props) => {
        return <h2>Welcome back!</h2>;
      };
      const GuestGreeting = (props) => {
        return <h2>Please sign up.</h2>;
      };
      const Greeting = (props) => {
        const isLoggedIn = props.isLoggedIn;
        if (isLoggedIn) {
          return <UserGreeting />;
        }
        return <GuestGreeting />;
      };
      const LoginButton = (props) => {
        return (
          <button onClick={props.onClick}>
            Login
          </button>
        );
      };
      const LogoutButton = (props) => {
        return (
          <button onClick={props.onClick}>
            Logout
          </button>
        );
      };
      ReactDOM.render(
        <LoginControl />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

Hiển thị trình duyệt

Viết một render có điều kiện bên trong cấu trúc JSX

Render có điều kiện có thể được viết bên trong một cấu trúc JSX, như sau:

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

Hoặc được viết như sau

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}