Javascript nếu hiển thị html

Trong React, bạn có thể tạo các thành phần riêng biệt đóng gói hành vi mà bạn cần. Sau đó, bạn chỉ có thể kết xuất một số trong số chúng, tùy thuộc vào trạng thái ứng dụng của bạn

Kết xuất có điều kiện trong React hoạt động giống như cách điều kiện hoạt động trong JavaScript. Sử dụng các toán tử JavaScript như if hoặc toán tử có điều kiện để tạo các phần tử biểu thị trạng thái hiện tại và để React cập nhật giao diện người dùng để khớp với chúng

Hãy xem xét hai thành phần này

function UserGreeting(props) {
  return <h1>Welcome back!h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.h1>;
}

Chúng tôi sẽ tạo một thành phần

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

0 hiển thị một trong hai thành phần này tùy thuộc vào việc người dùng có đăng nhập hay không

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

Dùng thử trên CodePen

Ví dụ này hiển thị một lời chào khác nhau tùy thuộc vào giá trị của

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

1 prop

Biến phần tử

Bạn có thể sử dụng các biến để lưu trữ các phần tử. Điều này có thể giúp bạn kết xuất có điều kiện một phần của thành phần trong khi phần còn lại của đầu ra không thay đổi

Hãy xem xét hai thành phần mới này đại diện cho các nút Đăng xuất và Đăng nhập

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

Trong ví dụ bên dưới, chúng ta sẽ tạo một tên là

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

2

Nó sẽ hiển thị

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

3 hoặc

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

4 tùy thuộc vào trạng thái hiện tại của nó. Nó cũng sẽ hiển thị một

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

5 từ ví dụ trước

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {      button = <LogoutButton onClick={this.handleLogoutClick} />;    } else {      button = <LoginButton onClick={this.handleLoginClick} />;    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />        {button}      div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

Dùng thử trên CodePen

Mặc dù khai báo một biến và sử dụng câu lệnh if là một cách hay để hiển thị một thành phần theo điều kiện, đôi khi bạn có thể muốn sử dụng một cú pháp ngắn hơn. Có một số cách để điều kiện nội tuyến trong JSX, được giải thích bên dưới

Inline If với toán tử logic &&

Bạn có thể bằng cách bọc chúng trong dấu ngoặc nhọn. Điều này bao gồm toán tử logic

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

7 của JavaScript. Nó có thể hữu ích cho việc bao gồm một phần tử một cách có điều kiện

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!h1>
      {unreadMessages.length > 0 &&        <h2>          You have {unreadMessages.length} unread messages.        h2>      }    div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Mailbox unreadMessages={messages} />);

Dùng thử trên CodePen

Nó hoạt động vì trong JavaScript,

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

8 luôn đánh giá bằng

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

9 và

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

0 luôn đánh giá bằng

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

1

Do đó, nếu điều kiện là

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

2, phần tử ngay sau

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

7 sẽ xuất hiện trong kết quả. Nếu là

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

1 thì React sẽ phớt lờ và bỏ qua

Lưu ý rằng việc trả về một biểu thức giả vẫn sẽ khiến phần tử sau

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

7 bị bỏ qua nhưng sẽ trả về biểu thức giả. Trong ví dụ bên dưới,

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

6 sẽ được trả về bởi phương thức render

render() {
  const count = 0;  return (
    <div>
      {count && <h1>Messages: {count}h1>}    div>
  );
}

Nội tuyến If-Else với Toán tử có điều kiện

Một phương pháp khác để hiển thị nội tuyến các phần tử có điều kiện là sử dụng toán tử điều kiện JavaScript

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

7

Trong ví dụ bên dưới, chúng tôi sử dụng nó để hiển thị có điều kiện một khối văn bản nhỏ

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

Nó cũng có thể được sử dụng cho các biểu thức lớn hơn mặc dù điều gì đang xảy ra không rõ ràng lắm.

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

Cũng giống như trong JavaScript, bạn có thể chọn kiểu thích hợp dựa trên những gì bạn và nhóm của bạn cho là dễ đọc hơn. Cũng nên nhớ rằng bất cứ khi nào các điều kiện trở nên quá phức tạp, đó có thể là thời điểm tốt để

Ngăn không cho Component kết xuất

Trong một số trường hợp hiếm hoi, bạn có thể muốn một thành phần tự ẩn mặc dù nó được hiển thị bởi một thành phần khác. Để thực hiện việc này, hãy trả lại

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

8 thay vì đầu ra kết xuất của nó

Trong ví dụ dưới đây,

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

9 được hiển thị tùy thuộc vào giá trị của chỗ dựa được gọi là

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {      button = <LogoutButton onClick={this.handleLogoutClick} />;    } else {      button = <LoginButton onClick={this.handleLoginClick} />;    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />        {button}      div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

0. Nếu giá trị của prop là

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

1, thì thành phần không hiển thị

function WarningBanner(props) {
  if (!props.warn) {    return null;  }
  return (
    <div className="warning">
      Warning!
    div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        button>
      div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Page />);

Dùng thử trên CodePen

Việc trả về

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    button>
  );
}

8 từ phương thức

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {      button = <LogoutButton onClick={this.handleLogoutClick} />;    } else {      button = <LoginButton onClick={this.handleLoginClick} />;    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />        {button}      div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

3 của một thành phần không ảnh hưởng đến việc kích hoạt các phương thức vòng đời của thành phần đó. Chẳng hạn,

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {      button = <LogoutButton onClick={this.handleLogoutClick} />;    } else {      button = <LoginButton onClick={this.handleLoginClick} />;    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />        {button}      div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

4 sẽ vẫn được gọi

Làm cách nào để hiển thị phần tử HTML trong JavaScript?

Làm cách nào để sử dụng if trong JavaScript và HTML?

Chúng ta có thể sử dụng điều kiện if trong HTML không?

Làm cách nào để hiển thị nội dung HTML trong div bằng JavaScript?