reactjs 登录注销功能 （附React.js小书第三部分阅读码）

原理地址：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

渲染列表数据

Lists and Keys

//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 小书 - 评论功能 - 数组渲染]

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!