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中的列表处理