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 Welcome back!;
}
function GuestGreeting[props] {
return Please sign up.;
}
Chúng tôi sẽ tạo một thành phần
function Greeting[props] {
const isLoggedIn = props.isLoggedIn;
if [isLoggedIn] { return ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
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ôngfunction Greeting[props] {
const isLoggedIn = props.isLoggedIn;
if [isLoggedIn] { return ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
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 ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
1 propBiế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 [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
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 ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
2Nó sẽ hiển thị
function Greeting[props] {
const isLoggedIn = props.isLoggedIn;
if [isLoggedIn] { return ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
3 hoặc function Greeting[props] {
const isLoggedIn = props.isLoggedIn;
if [isLoggedIn] { return ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
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 ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
5 từ ví dụ trướcclass 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 = ; } else { button = ; }
return [
{button}
];
}
}
const root = ReactDOM.createRoot[document.getElementById['root']];
root.render[];
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 ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
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ệnfunction Mailbox[props] {
const unreadMessages = props.unreadMessages;
return [
Hello!
{unreadMessages.length > 0 && You have {unreadMessages.length} unread messages. }
];
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
const root = ReactDOM.createRoot[document.getElementById['root']];
root.render[];
Dùng thử trên CodePen
Nó hoạt động vì trong JavaScript,
function Greeting[props] {
const isLoggedIn = props.isLoggedIn;
if [isLoggedIn] { return ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
8 luôn đánh giá bằng function Greeting[props] {
const isLoggedIn = props.isLoggedIn;
if [isLoggedIn] { return ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
9 và function LoginButton[props] {
return [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
0 luôn đánh giá bằng function LoginButton[props] {
return [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
1Do đó, nếu điều kiện là
function LoginButton[props] {
return [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
2, phần tử ngay sau function Greeting[props] {
const isLoggedIn = props.isLoggedIn;
if [isLoggedIn] { return ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
7 sẽ xuất hiện trong kết quả. Nếu là function LoginButton[props] {
return [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
1 thì React sẽ phớt lờ và bỏ quaLư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 ; } return ;}
const root = ReactDOM.createRoot[document.getElementById['root']];
// Try changing to isLoggedIn={true}:
root.render[];
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 [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
6 sẽ được trả về bởi phương thức renderrender[] {
const count = 0; return [
{count && Messages: {count}}
];
}
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 [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
7Trong 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 [
The user is {isLoggedIn ? 'currently' : 'not'} logged in.
];
}
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 [
{isLoggedIn ?
: }
];
}
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 [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
8 thay vì đầu ra kết xuất của nóTrong ví dụ dưới đây,
function LoginButton[props] {
return [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
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 = ; } else { button = ; }
return [
{button}
];
}
}
const root = ReactDOM.createRoot[document.getElementById['root']];
root.render[];
0. Nếu giá trị của prop là function LoginButton[props] {
return [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
1, thì thành phần không hiển thịfunction WarningBanner[props] {
if [!props.warn] { return null; }
return [
Warning!
];
}
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 [
{this.state.showWarning ? 'Hide' : 'Show'}
];
}
}
const root = ReactDOM.createRoot[document.getElementById['root']];
root.render[];
Dùng thử trên CodePen
Việc trả về
function LoginButton[props] {
return [
Login
];
}
function LogoutButton[props] {
return [
Logout
];
}
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 = ; } else { button = ; }
return [
{button}
];
}
}
const root = ReactDOM.createRoot[document.getElementById['root']];
root.render[];
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 = ; } else { button = ; }
return [
{button}
];
}
}
const root = ReactDOM.createRoot[document.getElementById['root']];
root.render[];
4 sẽ vẫn được gọi