Về cơ bản, tôi có một thành phần phản ứng, render()cơ quan chức năng của nó như sau: (Nó là thành phần lý tưởng của tôi, có nghĩa là nó hiện không hoạt động)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: code does not work here
if (this.props.hasImage) <MyImage />
else <OtherElement/>
</div>
)
}
Câu trả lời:
Không hẳn như vậy, nhưng có những cách giải quyết. Có một phần trong tài liệu của React về kết xuất có điều kiện mà bạn nên xem qua. Đây là một ví dụ về những gì bạn có thể làm bằng cách sử dụng if-else nội tuyến.
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
Bạn cũng có thể xử lý nó bên trong hàm kết xuất, nhưng trước khi trả về jsx.
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
Cũng đáng nói đến những gì ZekeDroid đưa ra trong các bình luận. Nếu bạn chỉ đang kiểm tra một điều kiện và không muốn hiển thị một đoạn mã cụ thể không tuân thủ, bạn có thể sử dụng && operator.
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
isTrue ? <div>Something</div> : nullbạn chỉ có thể làmisTrue && <div>Something</div>
Thực ra có một cách để thực hiện chính xác những gì OP đang yêu cầu. Chỉ cần kết xuất và gọi một hàm ẩn danh như vậy:
render () {
return (
<div>
{(() => {
if (someCase) {
return (
<div>someCase</div>
)
} else if (otherCase) {
return (
<div>otherCase</div>
)
} else {
return (
<div>catch all</div>
)
}
})()}
</div>
)
}
Bạn có thể làm bất cứ điều gì bằng cách sử dụng conditionaltuyên bố như thế if, else:
render() {
const price = this.state.price;
let comp;
if (price) {
comp = <h1>Block for getting started with {this.state.price}</h1>
} else {
comp = <h1>Block for getting started.</h1>
}
return (
<div>
<div className="gettingStart">
{comp}
</div>
</div>
);
}
Bạn nên nhớ về toán tử TERNARY
:
vì vậy mã của bạn sẽ như thế này,
render(){
return (
<div>
<Element1/>
<Element2/>
// note: code does not work here
{
this.props.hasImage ? // if has image
<MyImage /> // return My image tag
:
<OtherElement/> // otherwise return other element
}
</div>
)
}
Nếu bạn muốn một điều kiện để hiển thị các phần tử, bạn có thể sử dụng một cái gì đó như thế này.
renderButton() {
if (this.state.loading) {
return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />;
}
return (
<Button onPress={this.onButtonPress.bind(this)}>
Log In
</Button>
);
}
Sau đó gọi phương thức trợ giúp bên trong hàm kết xuất.
<View style={styles.buttonStyle}>
{this.renderButton()}
</View>
Hoặc bạn có thể sử dụng một cách khác của điều kiện bên trong trở lại.
{this.props.hasImage ? <element1> : <element2>}
Viết tắt cho cấu trúc if else hoạt động như mong đợi trong JSX
this.props.hasImage ? <MyImage /> : <SomeotherElement>
Bạn có thể tìm thấy các tùy chọn khác trên bài đăng blog này của DevNacho , nhưng cách viết tắt phổ biến hơn. Nếu bạn cần có mệnh đề if lớn hơn, bạn nên viết một hàm trả về hoặc thành phần A hoặc thành phần B.
ví dụ:
this.setState({overlayHovered: true});
renderComponentByState({overlayHovered}){
if(overlayHovered) {
return <overlayHoveredComponent />
}else{
return <overlayNotHoveredComponent />
}
}
Bạn có thể hủy cấu trúc lớp phủ của mình từ this.state nếu bạn cung cấp nó dưới dạng tham số. Sau đó thực thi hàm đó trong phương thức render () của bạn:
renderComponentByState(this.state)
Nếu bạn cần nhiều hơn một điều kiện, vì vậy bạn có thể thử điều này
https://www.npmjs.com/package/react-if-elseif-else-render
import { If, Then, ElseIf, Else } from 'react-if-elseif-else-render';
class Example extends Component {
render() {
var i = 3; // it will render '<p>Else</p>'
return (
<If condition={i == 1}>
<Then>
<p>Then: 1</p>
</Then>
<ElseIf condition={i == 2}>
<p>ElseIf: 2</p>
</ElseIf>
<Else>
<p>Else</p>
</Else>
</If>
);
}
}
Loại 1: If kiểu câu lệnh
{props.hasImage &&
<MyImage />
}
Loại 2: If else kiểu câu lệnh
{props.hasImage ?
<MyImage /> :
<OtherElement/>
}
Có thể tôi đã quá muộn ở đây. Nhưng tôi hy vọng điều này sẽ giúp một ai đó. Đầu tiên hãy tách hai yếu tố đó ra.
renderLogout(){
<div>
<LogoutButton onClick={this.handleLogoutClick} />
<div>
}
renderLogin(){
<div>
<LoginButton onClick={this.handleLoginClick} />
<div>
}
Sau đó, bạn có thể gọi các hàm này từ hàm render bằng câu lệnh if else.
render(){
if(this.state.result){
return this.renderResult();
}else{
return this.renderQuiz();
}}
Điều này làm việc cho tôi. :)
Tôi đã sử dụng toán tử bậc ba và nó hoạt động tốt đối với tôi.
>
{item.lotNum == null ? ('PDF'):(item.lotNum)}
Bạn cũng có thể sử dụng toán tử điều kiện (bậc ba) bên trong toán tử điều kiện trong trường hợp bạn có 2 phụ thuộc khác nhau.
{
(launch_success)
?
<span className="bg-green-100">
Success
</span>
:
(upcoming)
?
<span className="bg-teal-100">
Upcoming
</span>
:
<span className="bg-red-100">
Failed
</span>
}
Hãy thử sử dụng trường hợp Switch hoặc toán tử bậc ba
render(){
return (
<div>
<Element1/>
<Element2/>
// updated code works here
{(() => {
switch (this.props.hasImage) {
case (this.props.hasImage):
return <MyImage />;
default:
return (
<OtherElement/>;
);
}
})()}
</div>
)
}
Điều này làm việc cho tôi và sẽ hiệu quả cho bạn khác. Thử nhà điều hành bậc ba