Phản ứng kết xuất có điều kiện
Trong React, bạn có thể kết xuất các thành phần có điều kiện.
Có nhiều hướng khác nhau để làm điều đó.
câu lệnh if
Chúng ta có thể sử dụng toán tử if
JavaScript để quyết định thành phần nào sẽ hiển thị.
Ví dụ:
Chúng ta sẽ sử dụng hai thành phần này:
function MissedGoal() { return <h1>MISSED!</h1>; } function MadeGoal() { return <h1>Goal!</h1>; }
Ví dụ:
Bây giờ, chúng ta sẽ tạo một thành phần khác chọn thành phần nào 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/>; } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Goal isGoal={false} />);
Hãy thử thay đổi thuộc tính isGoal
thành true
:
Ví dụ:
const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Goal isGoal={true} />);
Được chứng nhận!
$95 ĐĂNG KÝ
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ử &&
.
Ví dụ:
Chúng ta có thể nhúng các biểu thức JavaScript trong 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']; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage cars={cars} />);
Nếu cars.length > 0
tương đương với true thì biểu thức sau &&
sẽ hiển thị.
Hãy thử làm trống mảng cars
:
Ví dụ:
const cars = []; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Garage cars={cars} />);
Toán tử 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.
Ví dụ:
Trả về thành phần MadeGoal
nếu isGoal
là true
, nếu không thì trả về thành phần MissedGoal
:
function Goal(props) { const isGoal = props.isGoal; return ( <> { isGoal ? <MadeGoal/> : <MissedGoal/> } </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Goal isGoal={false} />);
Để tìm hiểu thêm, hãy xem phần toán tử bậc ba .