Phản ứng kết xuất có điều kiện
Trong React, bạn có thể hiển thị các thành phần một cách có điều kiện.
Có nhiều hướng khác nhau để làm điều đó.
if Bản tường trình
Chúng ta có thể sử dụng iftoán tử JavaScript để quyết định thành phần nào sẽ hiển thị.
Thí dụ:
Chúng tôi sẽ sử dụng hai thành phần sau:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Thí dụ:
Bây giờ, chúng ta sẽ tạo một thành phần khác chọn thành phần sẽ hiển thị dựa trên một điều kiện:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Hãy thử thay đổi isGoalthuộc tính thành true:
Thí dụ:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Được chứng nhận!
$ 95 GHI DANH
&&Toán tử logic
Một cách khác để hiển thị có điều kiện một thành phần React là sử dụng &&toán tử.
Thí dụ:
Chúng ta có thể nhúng các biểu thức JavaScript vào JSX bằng cách sử dụng dấu ngoặc nhọn:
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);
}
const cars = ['Ford', 'BMW', 'Audi'];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Nếu cars.length tương đương với true, biểu thức sau &&sẽ hiển thị.
Thử làm trống carsmảng:
Thí dụ:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Nhà điều hành bậc ba
Một cách khác để hiển thị các phần tử có điều kiện là sử dụng toán tử bậc ba.
condition ? true : false
Chúng ta sẽ quay lại ví dụ về mục tiêu.
Thí dụ:
Trả lại MadeGoalthành phần nếu
isGoalcó true, nếu không, hãy trả lại MissedGoalthành phần:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Để tìm hiểu thêm, hãy xem phần toán tử bậc ba .