原理地址:reactjs.org
[Conditional Rendering]
直接正题
需求:制作一个登录注销按钮,
当未登录时显示未登录组件<Logout />
已登录后显示登录组件<Login />
组件代码
//未登录时显示的页面 class Logout extends Component { toggleLog(){ if(this.props.onSubmit){ //当输出组件中存在onSubmit参数,执行这个参数下的函数 this.props.onSubmit() } } render(){ return ( <div> <button onClick={this.toggleLog.bind(this)}>请登录</button> <div>内容为未登录时的页面</div> </div> ) } }
//登录后显示的页面 class Login extends Component { toggleLog(){ if(this.props.onSubmit){ //当输出组件中存在onSubmit参数,执行这个参数下的函数 this.props.onSubmit() } } render(){ return ( <div> <button onClick={this.toggleLog.bind(this)}>注销</button> <div>内容为登录后的页面</div> </div> ) } }
条件渲染
//条件渲染[Conditional Reandering] class App extends Component { constructor(){ super() this.state= {isLoggedIn:false} } toggle(){ this.setState({ isLoggedIn : !this.state.isLoggedIn }) } render(){ return ( <div> { this.state.isLoggedIn ? <Login onSubmit={this.toggle.bind(this)} /> : <Logout onSubmit={this.toggle.bind(this)} /> } </div> ) } }
阅读码
ReactJs 小书第三部分阅读码
账号:1498710037@qq.com
阅读码: LrOeCyPFxa
渲染列表数据
//CommentList组件 export default class CommentList extends Component { render(){ const {comment} = this.props; return ( {comment.map( (item,index) => { return ( <Comment comment={item} key={index} /> ) })} ) } }
//Comment组件 export default class Comment extends Component { render(){ const {comment} = this.props return ( <session> <p>{comment.username}</p> <p>{comment.content}</p> </session> ) } }
[ReactJS 小书 - 评论功能 - 数组渲染]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。