Representación condicional de reaccionar

Representación condicional

Introduccion

Sabemos que reaccionar es una biblioteca de JavaScript para construir interfaces de usuario. Puede usarlo para crear componentes con sus propios estados y luego crear componentes de IU más complejos a partir de estos componentes. Pero en algunos casos, necesitamos
renderizar diferentes IU de acuerdo con diferentes condiciones para lograr diferentes funciones. React utiliza JSX para definir los componentes de la interfaz de usuario, pero no admite directamente bucles o expresiones condicionales. Aun así, podemos utilizar la representación condicional para resolver nuestros problemas.

Método de representación condicional en reaccionar

• si ... si no
• Use nulo para evitar renderizar
• Elemento variable
• Y operador &&
• Operador ternario
• Inmediatamente llamada expresión de función (IIFE)
• Subcomponente
• Componentes de orden superior (HOC)

si ... si no

function UserGreeting(props){
	return <h1>Welcome back!</h1>
}
function GusetGreeting(props){
	return <h1>Please sign up.</h1>
}
function Greeting(props){
	const isLoggedIn = props.isLoggedIn;
	if(isLoggedIn){
		return <UserGreeting />;
	}
	return <GusetGreeting />;
}

ReactDOM.render(
	<Greeting isLoggedIn={true} />,
	document.getElementById('condition')
)

En el código anterior, cuál de los componentes anteriores se mostrará dependiendo de si el usuario ha iniciado sesión

Use nulo para evitar renderizar

En casos excepcionales, es posible que desee ocultar el componente incluso si ha sido procesado por otros componentes. Para lograr esto, puede hacer que el
método de representación devuelva directamente nulo sin ninguna representación

En el siguiente ejemplo, la representación <WarningBanner />se basará en warnel valor en prop , si warn
el valor de es false, entonces el componente no se representará

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(state => ({
			showWarning:!state.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('warning'))

Elemento variable

Puede usar variables para almacenar elementos, puede ayudarlo a representar condicionalmente parte del componente, y otras partes de representación no cambiarán debido a esto

En el siguiente ejemplo, creamos dos componentes de la función, que representa el botón conectarse y desconectarse para crear un compañero de trabajo nombrados LoginControl
asambleas y estado, que se representará en base al estado actual <LoginButton />o <LogoutButton>. Al mismo tiempo, también
representará el<Greeting />

function LoginButton(props){
	return (
		<button onClick={props.onClick}>Login</button>
	)
}

function LogoutButton(props){
	return(
		<button onClick={props.onClick}>logout</button>
	)
}

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;
		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('login-btn'))

Y operador &&

Al envolver el código entre llaves, puede incrustar cualquier expresión en JSX. Esto también incluye el
operador lógico AND (&&) en JavaScript . Puede realizar fácilmente la representación condicional de elementos.

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('mail-box')
)

La razón de esto es que en JavaScript, true&&expressionsiempre regresa expression
y false&&expressionsiempre regresa false.

Por lo tanto, si la condición es true, se representará &&el elemento de la derecha; si lo es false, React lo ignorará y lo omitirá.

Operador ternario

Otra forma de renderizar condicional en línea es usar el operador trinocular en JavaScriptcondition?true:false

El <LoginControl />montaje como para hacer

render(){
		const isLoggedIn = this.state.isLoggedIn;
		return(
			<div>
				<Greeting isLoggedIn={isLoggedIn} />
				{isLoggedIn?<LogoutButton onClick = {this.handleLogoutClick} />:<LoginButton onClick ={this.handleLoginClick} />}			
			</div>
		)
	}

Inmediatamente llamada expresión de función (IIFE)

Ejecute inmediatamente la función como se muestra en el siguiente código

(function myFunction(/*arguments*/){})(/*arguments*/)

Cuando está atascado en el código JSX y desea escribir un gran bloque de lógica, puede usar IIFE además de volver al principio

function render(){
	return(
		<div>
			{
				(() =>{
					if(renderComponent1){
						return <Component1 />
					}else{
						return <div />
					}
				})()
			}
		</div>
	)
}

Subcomponente

Esta es una variante de IIFE, que es reemplazar este bit de función de ejecución inmediata con una función normal:

function render(){
	return(
		<div>
			<SubRender />
		</div>
	)
}
function SubRender(){
	if(renderComponent1){
		return <Component1 />
	}else{
		return <div />
	}
}

Componentes de orden superior

Los componentes de orden superior son funciones que devuelven un nuevo componente y reciben un componente como parámetro.

Luego podemos escribir declaraciones condicionales en componentes de orden superior y devolver diferentes componentes

function highrOrderComponent(component){
	return function EnhancedComponent(props){
		if(condition){
			return <AnotherComponent {...props} />
		}
		return <Component {...props} />
	}
}