ReactJS编程（三）

逻辑判断

1、if else 

简单登陆逻辑如下：

class LoginControl extends React.Component {
//构造函数 初始化props、state数据
    constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }
  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }
 
  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }
 
  render() {
    const isLoggedIn = this.state.isLoggedIn;
 
    let button = null;
    if (isLoggedIn) {//key point
      button = ;
    } else {
      button = ;
    }
 
    return (
      

        
        {button}
      
    );
  }
}
 
ReactDOM.render(
  ,
  document.getElementById('example')
);

2、&&

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    

      
Hello!
      {unreadMessages.length > 0 && //&& 如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。
        

          您有 {unreadMessages.length} 条未读信息。
        
      }
    
  );
}
 
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  ,
  document.getElementById('example')
);

&& 如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

3、三目式    condition ? true : false

上面登陆逻辑可优化为

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    

      {isLoggedIn ? (
        
      ) : (
        
      )}
    
  );
}

4、循环

function Blog(props) {
  const sidebar = (
    

      {props.posts.map((post) =>
        

          {post.title}
        
      )}
    
  );
  const content = props.posts.map((post) =>
    

      
{post.title}
      
{post.content}
    
  );
  return (
    

      {sidebar}
      

      {content}
    
  );
}
 
const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  ,
  document.getElementById('example')
);

注：key 是list每个item中数据的唯一id，有id直接赋值id，无id可赋值index也可