Điều gì không đúng về toán tử này trong javascript

Question

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

Nội dung chính Show

Biến phần tử
Inline If với toán tử logic &&
Nội tuyến If-Else với Toán tử có điều kiện
Ngăn không cho Component kết xuất
Điều gì không phải là toán tử không trong JavaScript?
Toán tử này trong JavaScript là gì?
Toán tử cho không là gì?
3 toán tử logic trong JavaScript là gì?

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ư

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 toán tử đ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 prop

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

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 stateful component có 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

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 là một cách tốt để 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ể nhúng các biểu thức vào JSX bằng cách gói 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 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

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

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

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ỏ

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

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.

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

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 để trích xuất một thành phần

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ó tên 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 này không 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} />);

9

Dùng thử trên CodePen

Việc trả lại

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

Điều gì không phải là toán tử không trong JavaScript?

not not) là sự lặp lại của toán tử logic một ngôi not(. ) hai lần . Phủ định kép (. ) toán tử tính toán giá trị thực của một giá trị. Toán tử này trả về một giá trị boolean, giá trị này phụ thuộc vào tính trung thực của biểu thức đã cho.

Toán tử này trong JavaScript là gì?

Trong JavaScript, từ khóa this dùng để chỉ một đối tượng . Đối tượng nào phụ thuộc vào cách đối tượng này được gọi (được sử dụng hoặc được gọi). Từ khóa này đề cập đến các đối tượng khác nhau tùy thuộc vào cách nó được sử dụng. Trong một phương thức đối tượng, điều này đề cập đến đối tượng. Một mình, điều này đề cập đến đối tượng toàn cầu.

Toán tử cho không là gì?

Toán tử logic *NOT (hoặc ¬) được sử dụng để phủ định các biến hoặc hằng logic.

3 toán tử logic trong JavaScript là gì?

Các toán tử logic được sử dụng để tìm logic giữa các biến trong JavaScript. Có ba toán tử logic trong JavaScript. . (HOẶC VÀ),. (KHÔNG) .

programming javascript

Điều gì không đúng về toán tử này trong javascript

Biến phần tử

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

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

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

Điều gì không phải là toán tử không trong JavaScript?

Toán tử này trong JavaScript là gì?

Toán tử cho không là gì?

3 toán tử logic trong JavaScript là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội