入坑React系列四

条件渲染

元素变量：

创建一个名为LoginControl的有状态组件或还有

<!-- LoginControl 组件,在这个组件里进行渲染-->
class LoginControl extends React.Component{
  constructor(props){
    super(props);
<!--前边只是起个名字-->
    this.handleLoginClick=this.handleLoginClick.bind(this);
    this.test=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;
    if(isLoggedIn){
      button = <LogoutButton onClick={this.test} />
    }else{
      button = <LoginButton onClick={this.handleLoginClick} />
    }
    return(
      <div>
       <Greeting isLoggedIn={isLoggedIn}/>

        {button}   
      </div>
   
    )
  }
  
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

// 新增两个组件 ： loginbutton logoutbutton
function LoginButton(props){
  return (
  <button onClick={props.onClick}>Login</button>
  )
}
function LogoutButton(props){
  return (
  <button onClick={props.onClick}>Logout</button>
  )
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <LoginControl />,
  document.getElementById('root')
);
<!--详细内容看笔记本-->

与运算符&&

true && expression 总是返回expression 而false && expression 返回false
例子：

function Mailbox(props){
  const UnReadMessage = props.UnReadMessage;
  return(
    <div>
    <!--这里这里-->
        <h1>Hello!</h1>                              
        {
        UnReadMessage.length > 0 &&
        <h2>
            you have {UnReadMessage.length} unread message 
            <h4>they are {UnReadMessage+" " }</h4> 
        </h2>
      
        }
    
    </div>
  
  )
}

const message = ['test1','test2']

ReactDOM.render(
  <Mailbox UnReadMessage={message} />,
  document.getElementById('root')
);

三目运算符

condition ? true : false

注意易读性

阻止组件渲染

• 在下面的例子中， 根据属性 warn 的值条件渲染。如果 warn 的值是 false，则组件不会渲染：

function WarningBanner(props){
  const warn = props.warning;
  if(!warn){
    return null;
  }
  return(
  
  <div>WARNING</div>
  )
}
class Page extends React.Component{
  constructor(props){
    super(props); 
    this.state = {isWarning:true};
    this.anniu = this.warningClick.bind(this);
  }
  warningClick(){
    this.setState(prevState=>({
      isWarning:!prevState.isWarning
    }))
  }
  render(){
    return(
    <div>
        <WarningBanner warning={this.state.isWarning} />
        <button onClick={this.anniu}>{this.state.isWarning?'hide':'show'}</button>
        
    </div>
    
    )
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

组件的render方法返回null并不会影响该组件生命周期方法的回调。

##列表 && keys

列表组件开始之前复习一下： map filter

• map ：映射，原数组被映射成对应的新数组。
• filter :过滤，返回过滤后的数组，过滤的条件卸载函数里，最终的结果是复合过滤的条件的

列表

<!--筛选出zhang开头的邮件-->
.filter(function(email) {  return /^zhang/.test(email); });

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>      //语句多于一句时，使用花括号括起来加return
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

keys

Keys可以在DOM中某些元素被增加或删除时帮助React识别哪些元素发生了变化。通常使用来自数据的id作为元素的key.当元素没有确定的id时，可以使用它的序列号索引index作为key

用keys 提取组件

function ListItem(props) {
  // 对啦！这里不需要指定key:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 又对啦！key应该在数组的上下文中被指定
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

注意：元素位于map 方法内时需要设置key