ternární reagovať
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
ako používať ak iný v jsx v reagovať
renderElement(){
if(this.state.value == 'news')
return <Text>data</Text>;
return null;
}
render() {
return (
<View style={styles.container}>
{ this.renderElement() }
</View>
)
}
reagovať štýl ternární operátora
<img
src={this.state.photo}
alt=""
style={ isLoggedIn ? { display:'block'} : {display : 'none'} }
/>
// or
<img
src={this.state.photo}
alt=""
style={ { display: isLoggedIn ? 'block' : 'none' } }
/>
reagovali, ak vyhlásenie
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div>
);
}
podmienené jsx vlastníctva
render() {
return (
<a className="navbar-brand" {... url ? {href: url} : {}}>Logo</a>
)
}
Podmienené Vykresľovania v Reagovať js
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);