Kinh Nghiệm Hướng dẫn ReactJS: Rendering có Đk trong React Chi Tiết
READ ALSO
Testnet là gì? Cách làm Testnet những dự án công trình bất Động sản
#### trong Excel là lỗi gì? Cách sửa lỗi #### nhanh gọn và đơn thuần và giản dị nhất
Trong React, toàn bộ chúng ta trọn vẹn có thể tạo ra những component riêng không liên quan gì đến nhau chứa những hành vi thiết yếu phục vụ yêu cầu người tiêu dùng. Sau đó, nhờ vào state hoặc props của ứng dụng để làm Đk render có component đó.
NỘI DUNGCâu lệnh IFREAD ALSOGán element vào một trong những biếnCondition operatorToán tử logic &&Câu lệnh Switch…caseCâu lệnh IF
Render có Đk trong React hoạt động và sinh hoạt giải trí tương tự như cách mà toàn bộ chúng ta vẫn thường thấy trong javascript. Đó là dùng câu lệnh “if-else”.
Xét ví dụ sau, ta có 2 component trả về 2 element rất khác nhau:
function UserGreeting()
return
Welcome back!
;
function GuestGreeting()
return Please sign up;
Sau đó, ta tạo thêm một component cha là Greeting, trách nhiệm là hiển thị một trong hai component con trên tùy vào trạng thái của người tiêu dùng đã đặng nhập hay chưa, khi props isLoggedIn thay đổi thì component hiển thị cũng tiếp tục thay đổi.
function Greeting(props)
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn)
return ;
return ;
ReactDOM.render(
// Thử thay đổi prop isLoggedIn=true:
,
document.getElementById(‘root’)
);
Gán element vào một trong những biến
Chúng ta trọn vẹn có thể khai báo React element và gán chúng vào một trong những biến để tương hỗ cho việc render hiệu suất cao hơn, khi Đk thay đổi thì application sẽ chỉ render lại element được gán vào biến và không thay đổi cá element còn sót lại. Vì thế, không phải render lại toàn bộ component.
Xét ví dụ sau:
class UserComponent extends React.Component
constructor(props)
super(props);
this.state = gender: “”, name: “Danny” ;
handleChangeGender = (sự kiện) =>
this.setState( gender: sự kiện.target.value );
;
handleChangeName = (sự kiện) =>
this.setState( name: sự kiện.target.value );
;
render()
let element =
Hello, Mr. this.state.name!
;
if (this.state.gender === “female”)
element =
Hello, Mrs. this.state.name!
;
return (
Male
Female
element
);
Ví dụ trên yêu cầu hiển thị câu xin chào ông hoặc bà tùy từng giới tính mà người tiêu dùng chọn, giá trị của khung select box thay đổi thì element sẽ thay đổi theo Đk như trên.
Condition operator
Hoặc ta trọn vẹn có thể rút gọn đoạn code bằng phương pháp sử dụng condition operator như sau:
class UserComponent extends React.Component
constructor(props)
super(props);
this.state = gender: “”, name: “Danny” ;
handleChangeGender = (sự kiện) =>
this.setState( gender: sự kiện.target.value );
;
handleChangeName = (sự kiện) =>
this.setState( name: sự kiện.target.value );
;
render()
return (
Male
Female
Hello, this.state.gender === “female” ? “Mrs.” : “Mr.”” ”
this.state.name!
);
Và kết quả hiển thị như sau:
Kết quả chọn giới tính nam
Kết quả chọn giới tính nữ
Toán tử logic &&
Việc khởi tạo React element sử dụng với câu lệnh if … else là cách làm khác ổn để render element theo Đk. Nhưng đôi lúc với những Đk if đơn thuần và giản dị không còn else thì câu lệnh if khiến code của toàn bộ chúng ta trở nên dài dòng và rườm rà. Lúc đó, bạn hãy sử dụng cú pháp ngắn lại với toán tử logic &&
Xét ví dụ sau:
function Mailbox(props)
const unreadMessages = props.unreadMessages;
return (
Hello!
unreadMessages.length > 0 && (
You have unreadMessages.length unread messages.
)
);
const messages = [“Hello!”, “How are you doing?”, “Are you there?”];
function App()
return ;
Đoạn code trên sẽ tiến hành hiểu là, nếu biến messages là mảng có mức giá trị (length >0) thì sẽ hiển thị text thông tin. giá trị của true && expression luôn nhờ vào expression, còn false && expression thì sẽ luôn luôn được hiểu là false
Vì thế, nếu Đk trả về giá trị là true, element phía sau toán tử logic && sẽ xuất hiện ở màn hình hiển thị. Nếu giá trị trả về là false, React sẽ bỏ qua nó.
Chú ý rằng việc trả về một falsy expression sẽ vẫn thực hiện cho element phía sau && bị giữ lại nhưng sẽ trả về một falsy expression. Trong ví dụ phía dưới,
sẽ tiến hành trả về bởi phương thức render.
render()
const count = 0;
return (
Messages: count
);
Câu lệnh Switch…case
Khi có nhiều Đk để render ra một element, ta trọn vẹn có thể sử dụng if với nhiều else, elseIf… Lúc này, đoạn code của toàn bộ chúng ta sẽ trở nên rối rắm và khó nhìn hơn. Thay vào đó, ta trọn vẹn có thể sử dụng câu lệnh switch…case để tường minh hơn.
Ví dụ:
class Document extends React.Component
render()
let linkDoccument = “”;
switch (this.props.topic)
case “if else statement”:
linkDoccument =
“https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if…else”;
break;
case “logic &&”:
linkDoccument =
“https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND”;
break;
default:
linkDoccument =
“https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator?retiredLocale=vi”;
return (
Link tìm hiểu thêm chủ đề this.props.topic:” ”
linkDoccument
);
const topic = [“if else statement”, “logic &&”, “condition operator”];
function App()
return ;
Bên cạnh đó, để ngăn ngừa việc render của component, ta trọn vẹn có thể return giá trị null trong những function. Ví dụ:
function WarningBanner(props)
if (!props.warn)
return null;
return (
);
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 (
);
ReactDOM.render(
,
document.getElementById(‘root’)
);
Việc return null không ảnh hướng tới những phương thức của lifecycle.
Bên trên là tất tần tật về việc render component theo Đk. Cám ơn mọi người đã theo dõi, kỳ vọng nội dung bài viết này sẽ hữu ích với bạn nhé!
LBài viết có tìm hiểu thêm thông tin từ link: https://vi.reactjs.org/docs/conditional-rendering.html
CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO
Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện thay mặt thay mặt: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí MinhĐiện thoại: 0364 333 333Tổng đài miễn phí: 1800 6734Email: [email protected]: www..org
Tags: Kiến thức Reactjs
Video ReactJS: Rendering có Đk trong React mới nhất?
Bann đang tìm kiếm từ khóa ReactJS: Rendering có Đk trong React 2022-10-28 19:16:13 san sẻ Mẹo về trong nội dung bài viết một cách Chi Tiết.
#ReactJS #Rendering #có #điều #kiện #trong #React ReactJS: Rendering có Đk trong React
===> Nếu bạn có thắc mắc hay yếu tố gì nội dung bài viết trọn vẹn có thể để lại phản hồi cuối bài nghen.