Phản ứng liên kết gốc-render-html

Có một thư mục khác trong thư mục gốc của dự án React của bạn, được đặt tên là "public". Trong thư mục này, có một tệp

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} />);

Bạn sẽ nhận thấy một

trong phần thân của tập tin này. Đây là nơi ứng dụng React của chúng ta sẽ được hiển thị

Ví dụ

Hiển thị một đoạn bên trong một phần tử có id là "root"

ReactDOM.render(
Hello
, document.getElementById('root'));

Kết quả được hiển thị trong

thành phần.

Chạy ví dụ »

Lưu ý rằng phần tử id không nhất thiết phải được gọi là "root", nhưng đây là quy ước chuẩn

Mã HTML

Mã HTML trong hướng dẫn này sử dụng JSX cho phép bạn viết các thẻ HTML bên trong mã JavaScript

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ư

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} />);

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} />);

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} />);

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} />);

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} />);

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} />);

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

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} />);

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} />);

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} />);

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} />);

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

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

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

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

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>
  );
}

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} />);

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

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

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} />);

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

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

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

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

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>
  );
}

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 UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

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

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 UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

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

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>
  );
}

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>
  );
}

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

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

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

Việc trả về

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

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

Tôi có thể hiển thị HTML trong React Native không?

Làm cách nào để chuyển đổi HTML sang React Native?

Làm cách nào để hiển thị chuỗi HTML khi HTML phản ứng?

Làm cách nào để hiển thị HTML từ phản hồi API trong phản ứng?