根据条件渲染不同组件,可以实现组件的显示与隐藏。
第一种:在函数内部通过属性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'));