React基础篇-条件&列表

1.条件语法

//方法一：if-else的组合
class LoginControl extends React.Component {
  constructor(props) {...}
  handleLoginClick() {...}
  handleLogoutClick() {...}
  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}
ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

//方法二：与运算符&&
class Mailbox extends React.Component {
  const valLen = props.valLen;
  return (
    <div>
      <h1>Hello!</h1>
      {valLen.length > 0 &&<h2>显示内容</h2>}   //true && ex 返回ex；false && ex 返回false
    </div>
  );
}
ReactDOM.render(
  <Mailbox valLen="3333" />,
  document.getElementById('root')
);

方法三：三目运算
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? 'isLoggedIn为true显示的内容' : '其他显示内容'}
    </div>
  );
}

2.列表

注意：
    1.使用 map() 去遍历数组或者对象，实现列表组件的return；
    2.一般习惯性的在列表组件中使用 key 属性来规定生成DOM的唯一性；
    3.key 值是无法使用 props.key 访问的；
    4.key 值的位置不可以过深，否则会导致解构不清晰等诸多问题；
    5.如果未定义 key 值时，常常使用 index(下标) 来作为 key 的属性值；
示例：
class NumberList extends React.Component{
    constructor(props){
        super(props);
        this.state={};
    }
    const numbers=this.props.numbers;
    const listItems = numbers.map((number,index) =>
        <li key={index}>
          {number}
        </li>
    );
    return (
        <ul>{listItems}</ul>
    );
}

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