react学习-模板渲染

标签：load   com   tag   组件   ring   表达式2   bin   cal   list   

1.列表渲染

.map遍历数组。index标记元素(更新、删除和修改的时候方便快速找到对应元素-更详细解释请看官网)；

注意点：

• key只能用在上下文为array的情况。比如我们在遍历一个组件时，key只能放在循环数组时调用的组件上，而不能用在组件里面（请看官网）

• 在遍历同一数组时，不同数组项的key必须不一样；不同数组的数组之间项没有这样的要求

  render() {
      // key的作用是用于标记元素
      const numbers = [1, 2, 3, 4, 5];
      const listItems = numbers.map((number, key) =>
        <li key={key}>{number}</li>
      )
  ?
      return (
        <ul>{listItems}</ul>
      )
    }

   

2.条件渲染

1. 通过执行条件函数获取返回值的形式实现条件渲染

   注意一点：状态发生改变后，会触发Getter方法

   ...
   render () {
       // 通过执行条件函数获取返回值的形式实现条件渲染
       // 改变状态也会触发Greeting函数重新执行：原理
       function Greeting() {
         console.log(123)
         const isLoggedIn = this.state.isLoggedIn
         if (isLoggedIn) {
           return <div>欢迎光临</div>;
         }
         return <div>请登录</div>;
       }
       
       function triggerLogin () {
         this.setState({
           isLoggedIn: !this.state.isLoggedIn
         })
       }
   ?
       return (
         <div>
           {Greeting.call(this)}
           <button onClick={triggerLogin.bind(this)}>改变状态</button>
         </div>
       )
     }
   ...

2. 模板内通过： 条件 && 表达式的形式

3. 模板内通过： 条件 ？ 表达式1 ： 表达式2

4. 模板返回null的情况

   一个组件如果返回值为null，相当于清空组件中的所有元素，但是这个组件还在。相当于更新当前组件

react学习-模板渲染

标签：load   com   tag   组件   ring   表达式2   bin   cal   list   

原文地址：https://www.cnblogs.com/lovlyGir/p/14906361.html