React学习之条件视图渲染（六）

1.条件化视图渲染的必要性

当你创建不同的组件的时候，可能需要通过你的应用state的数据来显示数据

class Creeting extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isLoggedIn : false
        };
        this.changeLog = this.changeLog.bind(this); 
    }

    changeLog(){
        console.log('-------');
        this.setState((preState,props) => ({
            isLoggedIn : !preState.isLoggedIn
        }));
    }

    render(){
        if(this.state.isLoggedIn) return <h1 onClick={this.changeLog}>Welcome back!</h1>;
        else return <h1 onClick={this.changeLog}>Please sign up.</h1>;
    }
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Creeting />,document.getElementById('example')
);

这里需要再次提醒的是，对于我们的组件是绑定事件的是没有浏览器处理的，它只是作为props中的一个属性而存在，传递它的子元素，只有我们的DOM标签才具有让浏览器响应它的绑定事件，也就是说<Creeting onClick={func}/>，这个func函数不会直接起作用。但是我们可以在这个组件内部通过props.onClick来传递，只有用在了DOM标签JSX语句才会成为被浏览器处理的事件

2.逻辑运算符的运用(三元运算符的使用就不说了)

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> ); } const messages = ['React','Re: React','Re:Re: React']; ReactDOM.render( <Mailbox unreadMessages={messages} />,document.getElementById('root') );

当unreadMessages.length > 0为true时，就会执行后面的语句，此用法属于基本的逻辑运算规律，同样的||在此处也可以运用。

如果有必要，可以隐藏组件输出，在render中返回null即可

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning"> Warning! </div> ); } class Page extends React.Component { constructor(props) { super(props); this.state = {showWarning: true} this.handleToggleClick = this.handleToggleClick.bind(this); } handleToggleClick() { this.setState(prevState => ({ showWarning: !prevState.showWarning })); } render() { return ( <div> <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}> {this.state.showWarning ? 'Hide' : 'Show'} </button> </div> ); } } ReactDOM.render( <Page />,document.getElementById('root') );

下一篇博客讲的是React中的列表处理

（编辑：李大同）

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