React 第七章 条件渲染

根据条件渲染不同组件，可以实现组件的显示与隐藏。

第一种：在函数内部通过属性props条件的判断，返回不同的组件，进行控制显示隐藏。如果返回null则表示不展示隐藏。

//1，条件渲染
function UserGreeting(props) {
	  return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
    return <h1>Please sign up.</h1>;
}
//通过if判断返回不同的组件进行展示渲染
function Greeting(props){
	const isLogin = props.isLoggedIn;
	if(isLogin){
		return <UserGreeting />;
	}else{
		return <GuestGreeting />;
	}
}
ReactDOM.render(<Greeting isLoggedIn={true} />,document.getElementById('root'));

第二种：通过改变内部state进行重新执行render渲染函数，进行控制组件的显示与隐藏，和上面的例子一样都是在函数内部通过变量判断进行控制。

//2，使用组件内状态state
function LoginButton(props){
	console.log(props);
	return (
		<button onClick={props.onClick}>登录</button>
	);
}

function LogOutButton(props){
	console.log(props);
	return (
		<button onClick={props.onClick}>退出</button>
	);
}
//通过更改state以及三目运算符 动态更新页面组件 state以变则会调用render函数
class LoginControl extends React.Component{
	constructor(props){
		super(props);
		this.state={isLoggind:false};
	}
	
	buttonClick = () =>{
		this.setState({
			isLoggind:!this.state.isLoggind
		});
	}
	
	render(){
		const isLoggind = this.state.isLoggind;
		//这里将click函数传递给了按钮组件，在按钮组件内的button onClick事件中进行了触发调用。
		const button = isLoggind ? <LogOutButton onClick={this.buttonClick} /> : <LoginButton onClick={this.buttonClick} />
		
		return(
			<div>
				<Greeting isLoggedIn={isLoggind} />
				{button}
			</div>
		)
	}
}

ReactDOM.render(<LoginControl />,document.getElementById('root'));

第三种：通过在大括号内部使用 &&与运算符 或者三目运算符进行控制组件是否显示与隐藏

//3，在大括号中使用&& 运算符
function SeyHello(props){
	
	return (
		<h1>{props.name && "hello"+props.name }</h1>	
	);
}
function SeyHello2(props){
	
	return (
			<h1>{props.name ? "hello"+props.name :"没人"}</h1>	
	);
}

ReactDOM.render(<SeyHello name="zhang san" />,document.getElementById('root'));