React
Renderização condicional
Em React, você pode criar componentes distintos que encapsulam comportamentos que você precisa. Sem seguida, você pode renderizar apenas alguns deles, dependendo do estado da sua aplicação.
Renderização condicional em Reac trabalha da mesma maneira que condicionais trabalham no JavaScript. Use operadores JavaScript como o if ou o opereador condicional para criar elementes que representam o estado atual, e deixe o React atualizar a interface do usuário.
Considere estes dois componentes:
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
Nós criaremos um componente Greeting que exibe um desses componentes dependendo se um usuário está logado:
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')
);
Este exemplo renderiza saudações diferentes dependendo do valor do prop isLoggedIn.
Variáveis de elementos #
Você pode usar variáveis para armazenar elementos. Isto pode ajudá-lo a renderizar condicionalmente uma parte de um componente enquanto o resto da saída não é alterado.
Considere estes dois novoc componentes que representam botões Logout e Login:
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
No abaixo, iremos criar um componente com estado chamado LoginControl.
Ele irá renderizar <LoginButton /> ou <LogoutButton /> dependendo do seu estado atual. Também irá renderizar um <Greeting /> do exemplo anterior:
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
Declarar uma variável e usar um operador if é uma boa maneira de renderizar condicionalmente um componente, algumas vezes você vai preferir umsar uma sintaxe mais curta. Existem algumas formas de usar condicionais em linha com JSX, explicadas abaixo:
If em linha com o operador && #
Você pode incorporar quaisquer expressões em JSX colocando-as entre chaves. Isto inclue o operador lógico do JavaScript &&. Pode ser útil para condicionar a inclusão de um elemento:
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
Isto funciona porque em Javascript, true && expression sempre avalia a expression, e false && expression sempre avalia o false.
Portanto, se o condicional for true, o elemento da esquerda após o && aparecerá na saída. Mas se for false, React irá ignorar.
If-Else em linha com operador condicional #
Outro método para renderização condicional de elementos é usando o operador condicional do JavaScript condition ? true : false.
No exemplo abaixo, nós usamos ele para condicionalmente renderizar um pequeno bloco de texto.
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
Também pode ser usado para expressões maiores, embora seja menos óbvio saber o que está acontecendo:
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
Assim como no JavaScript, cabe a você escolher um estilo adequado baseado no que você e seu time consideram mais legível. Lembrando também que sempre que condicionais começarem a ficar muito complexas, é uma boa hora para pensar em criar um componente.
Prevenindo a renderização do componente #
Em casos raros, você pode querer que um componente se oculte mesmo que tenha sido rendezido por outro componente. Para fazer isso, retorno null ao invés de renderizar a saída.
No exemplo abaixo, o <WarningBanner /> é renderizado dependendo do valor de sua propriedade warn. Se o valor da propriedade for false, então o componente não é renderizado:
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);