react渲染方式有:1、利用条件表达式渲染,适用于两个组件二选一的渲染;2、利用“&&”操作符渲染,适用于一个组件有无的渲染;3、利用变量输出组件渲染;4、利用函数方法输出组件或者利用函数式组件进行渲染。
本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。
React 组件条件渲染的几种方式
一、条件表达式渲染 (适用于两个组件二选一的渲染)
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); }
二、&& 操作符渲染 (适用于一个组件有无的渲染)
function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> ); }
三、利用变量输出组件渲染 (适用于有多个组件多种条件下的渲染)
render() { const isLoggedIn = this.state.isLoggedIn; const button = isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> ); return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); }
四、利用函数方法输出组件或者利用函数式组件进行渲染 (适用于多个子组件需要根据复杂的条件输出的情况)
1. 函数方式
renderButton(){ const isLoggedIn = this.state.isLoggedIn; if(isLoggedIn) { return (<LogoutButton onClick={this.handleLogoutClick} />); } else { return (<LoginButton onClick={this.handleLoginClick} />); } } render() { return ( <div> <Greeting /> {this.renderButton()} </div> ); }
2. 函数式组件
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') );
【相关推荐:Redis视频教程】
以上就是react渲染方式的几种是什么的详细内容,更多请关注php中文网其它相关文章!
已抢186049个
抢已抢67069个
抢已抢352530个
抢已抢666475个
抢已抢121197个
抢已抢21965个
抢