Em React, você pode criar componentes distintos que encapsulam o comportamento que você precisa. Então, você pode renderizar apenas alguns dos elementos, dependendo do estado da sua aplicação.
\nRenderização condicional em React funciona da mesma forma que condições funcionam em JavaScript. Use operadores de JavaScript como if ou operador condicional para criar elementos representando o estado atual, e deixe o React atualizar a UI para corresponde-los.
Considere esses dois componentes:
\nfunction UserGreeting(props) {\n return <h1>Welcome back!</h1>;\n}\n\nfunction GuestGreeting(props) {\n return <h1>Please sign up.</h1>;\n}Nós vamos criar um componente Greeting que mostra um dos outros dois componentes se o usuário estiver logado ou não:
function Greeting(props) {\n const isLoggedIn = props.isLoggedIn;\n if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />;}\nReactDOM.render(\n // Try changing to isLoggedIn={true}:\n <Greeting isLoggedIn={false} />, document.getElementById('root'));Este exemplo renderiza um “greeting” diferente dependendo do valor da prop isLoggedIn.
Você pode usar variáveis para guardar elementos. Isto pode te ajudar a renderizar condicionalmente parte do componente enquanto o resto do resultado não muda.
\nConsidere esses dois novos componentes representando os botões de Logout e Login:
\nfunction LoginButton(props) {\n return (\n <button onClick={props.onClick}>\n Login\n </button>\n );\n}\n\nfunction LogoutButton(props) {\n return (\n <button onClick={props.onClick}>\n Logout\n </button>\n );\n}No exemplo abaixo, nós vamos criar um componente stateful chamado LoginControl.
O componente irá renderizar o <LoginButton /> ou <LogoutButton /> dependendo do estado atual. Ele tambem irá renderizar <Greeting /> do exemplo anterior:
class LoginControl extends React.Component {\n constructor(props) {\n super(props);\n this.handleLoginClick = this.handleLoginClick.bind(this);\n this.handleLogoutClick = this.handleLogoutClick.bind(this);\n this.state = {isLoggedIn: false};\n }\n\n handleLoginClick() {\n this.setState({isLoggedIn: true});\n }\n\n handleLogoutClick() {\n this.setState({isLoggedIn: false});\n }\n\n render() {\n const isLoggedIn = this.state.isLoggedIn;\n let button;\n if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; }\n return (\n <div>\n <Greeting isLoggedIn={isLoggedIn} /> {button} </div>\n );\n }\n}\n\nReactDOM.render(\n <LoginControl />,\n document.getElementById('root')\n);Declarar uma variável e usar uma declaração condicional if é uma ótima maneira de renderizar um componente, mas às vezes você pode querer usar uma sintaxe mais curta. Existem algumas maneiras para utilizar condições inline em JSX, explicadas abaixo.
Você pode incorporar expressão em JSX encapsulando em chaves. Isto inclui o operador lógico && de JavaScript. Isto pode ser conveniente para incluir um elemento condicionalmente:
function Mailbox(props) {\n const unreadMessages = props.unreadMessages;\n return (\n <div>\n <h1>Hello!</h1>\n {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div>\n );\n}\n\nconst messages = ['React', 'Re: React', 'Re:Re: React'];\nReactDOM.render(\n <Mailbox unreadMessages={messages} />,\n document.getElementById('root')\n);Isto funciona porque em JavaScript, true && expressão são sempre avaliadas como expressão, e false && expressão são sempre avaliadas como false.
Portanto, se a condição é true, o elemento logo depois do && irá aparecer no resultado. Se o elemento é false, React irá ignora-lo.
Observe que retornar uma expressão falsa ainda fará com que o elemento após && seja pulado, mas retornará a expressão falsa. No exemplo abaixo, <div>0</div> será retornado pelo método de renderização.
render() {\n const count = 0; return (\n <div>\n { count && <h1>Messages: {count}</h1>} </div>\n );\n}Outro método para renderizar elementos inline é utilizar o operador condicional em JavaScript condição ? true : false.
No exemplo abaixo, nós o utilizaremos para renderizar condicionalmente um pequeno bloco de texto.
\nrender() {\n const isLoggedIn = this.state.isLoggedIn;\n return (\n <div>\n The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div>\n );\n}Pode também ser usado para expressões mais longas, embora o que está acontecendo seja menos óbvio:
\nrender() {\n const isLoggedIn = this.state.isLoggedIn;\n return (\n <div>\n {isLoggedIn ? <LogoutButton onClick={this.handleLogoutClick} />\n : <LoginButton onClick={this.handleLoginClick} /> }\n </div> );\n}Assim como em JavaScript, você decide o estilo apropriado com base no que você e a sua equipe considera mais legível. Lembre-se que toda vez que condições se tornam muito complexas, pode ser um bom momento para extrair componentes.
\nEm casos raros você pode desejar que um componente se esconda ainda que ele tenha sido renderizado por outro componente. Para fazer isso, retorne null ao invés do resultado renderizado.
No exemplo abaixo, o <WarningBanner /> é renderizado dependendo do valor da prop chamada warn. Se o valor da prop é false, o componente não é renderizado:
function WarningBanner(props) {\n if (!props.warn) { return null; }\n return (\n <div className=\"warning\">\n Warning!\n </div>\n );\n}\n\nclass Page extends React.Component {\n constructor(props) {\n super(props);\n this.state = {showWarning: true};\n this.handleToggleClick = this.handleToggleClick.bind(this);\n }\n\n handleToggleClick() {\n this.setState(state => ({\n showWarning: !state.showWarning\n }));\n }\n\n render() {\n return (\n <div>\n <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}>\n {this.state.showWarning ? 'Hide' : 'Show'}\n </button>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Page />,\n document.getElementById('root')\n);Retornar null do método render de um componente não afeta a ativação dos métodos do ciclo de vida do componente. Por exemplo, o método componentDidUpdate ainda será chamado.