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

来源：互联网发布：app软件商店编辑：程序博客网时间：2024/06/12 00:44

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

1 0